/* tokens.css
 * Design System Tokens (Foundation + Component derived tokens)
 * Non mettere regole UI qui, solo variabili.
 */

:root {
    /* Default */
  --surface-page: #f6f7f9;
  --surface-card: #ffffff;
  --surface-muted: #eef1f4;
  --surface-inactive: #e5e7eb;

  --text-primary: #111827;
  --color-text-secondary: #6b7280;
  --text-placeholder: #9ca3af;
  --text-inactive: #9ca3af;

  --border-default: #d1d5db;
  --border-strong: #9ca3af;
  --border-focus: #3b82f6;

  --color-primary: #1b4fa3;
  --color-accent: #2563eb;

  --feedback-success: #16a34a;
  --feedback-warning: #f59e0b;
  --feedback-error: #dc2626;

  --radius-default: 8px;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-body);
  
  /* =========================
   * FOUNDATION / GLOBAL TOKENS
   * ========================= */
   
  /* Page */
  --page-max-width: ;
  --page-gutter-x: ;

  /* Brand */
  --color-primary: ;
  --color-accent: ;

  /* Surfaces */
  --surface-page: ;
  --surface-card: ;
  --surface-muted: ;     /* opzionale: sezioni/strip, hover soft */
  --surface-inactive: ;  /* opzionale: disabled backgrounds */
  --surface-brand: ;
  --text-on-brand: ;
  --text-link: ;
  --text-link-hover: ;


  /* Text */
  --text-primary: ;
  --color-text-secondary: ;
  --text-placeholder: ;

  /* Borders */
  --border-default: ;
  --border-strong: ;
  --border-focus: ;      /* opzionale: se non vuoi usare primary */

  /* Feedback */
  --feedback-error: ;
  --feedback-success: ;
  --feedback-warning: ;
  --feedback-info: ;

  /* Icons */
  --icon-primary: ;
  --icon-secondary: ;

  /* Typography */
  --font-body: ;
  --font-heading: ;
  --font-body-medium: var(--font-body);

  /* Radius & Spacing scale */
  --radius-default: ;
  --space-1: ;
  --space-2: ;
  --space-3: ;

  /* =================================
   * COMPONENT TOKENS (Figma: INPUT)
   * ================================= */

  /* Input backgrounds */
  --color-background-input-default: var(--surface-card);
  --color-background-input-hover: var(--surface-card);
  --color-background-input-inactive: var(--surface-inactive, var(--surface-card));

  /* Input borders */
  --color-border-input-default: var(--border-default);
  --color-border-input-hover-active: var(--border-strong, var(--border-default));
  --color-border-input-focus: var(--border-focus, var(--color-primary));
  --color-border-input-error: var(--feedback-error);

  /* Input text */
  --color-text-input-primary: var(--text-primary);
  --color-text-input-placeholder: var(--text-placeholder, var(--color-text-secondary));
  --color-text-input-label: var(--text-primary);
  --color-text-input-helper: var(--color-text-secondary);

  /* Input icons */
  --color-icon-feedback-error: var(--feedback-error);
  --color-icon-input-suffix: var(--icon-secondary, var(--icon-primary));

  /* Input spacing */
  --spacing-label-input-gap: var(--space-2);
  --spacing-label-info-gap: var(--space-1);
  --spacing-input-helper-gap: var(--space-1);
  --spacing-input-feedback-gap: var(--space-1);

  /* Input radius */
  --radius-input: var(--radius-default);

  /* BUTTON */
  --color-bg-button-primary: ;
  --color-bg-button-secondary: ;
  --color-text-button-primary: ;
  --color-text-button-secondary: ; 
  --color-border-button-secondary: ;

  --button-height: ;
  --button-radius: ;
  --button-gap: ;
  --button-padding-x: ;

  --font-button-label-family: ;
  --font-button-label-size: ;
  --font-button-label-weight: ; 
  --font-button-label-style: ;
  --font-button-label-line-height: ;

  --button-l-height: ;
  --button-l-padding-x: ; 
  --font-button-l-label-size: ; 

  --button-m-height: ;
  --button-m-padding-x: ;
  --button-m-radius: ;
  --button-m-gap: ;
  --font-button-m-label-size: ; 

  --button-s-height: ;
  --button-s-padding-x: ;
  --font-button-s-label-size: ; 
  --button-s-radius: ;
  /* FINE BUTTON */

  /* INPUT / SELECT (unica taglia) */
  --input-height: ;
  --input-padding-x: ;
  --input-padding-y: ;
  --input-radius: ;

  --input-font-family: ;
  --input-font-size: ;
  --input-font-weight: ;
  --input-line-height: ;

  /* Colori */
  --color-background-input-default: ;
  --color-background-input-hover: ;
  --color-background-input-inactive: ;

  --color-border-input-default: ;
  --color-border-input-hover-active: ;
  --color-border-input-focus: ;
  --color-border-input-error: ;

  --color-text-input-primary: ;
  --color-text-input-placeholder: ;
  --color-text-input-label: ;
  --color-text-input-helper: ;

  /* HOME */

  /* Assist */
  --home-assist-icon-size: ;
}