/* Grigna: token semantici e dei componenti (tema chiaro di default, scuro con data-theme="dark" o preferenza di sistema).
   File generato da scripts/build-tokens.mjs: non modificarlo a mano. */

:root {
  --grigna-type-display: 700 36px/1.2 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-display-letter-spacing: -0.02em;
  --grigna-type-heading-lg: 700 24px/1.2 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-heading-lg-letter-spacing: -0.01em;
  --grigna-type-heading-md: 600 20px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-heading-md-letter-spacing: 0em;
  --grigna-type-heading-sm: 600 18px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-heading-sm-letter-spacing: 0em;
  --grigna-type-body: 400 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-body-letter-spacing: 0em;
  --grigna-type-body-strong: 600 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-body-strong-letter-spacing: 0em;
  --grigna-type-label: 500 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-label-letter-spacing: 0em;
  --grigna-type-caption: 400 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-caption-letter-spacing: 0em;
  --grigna-type-data: 600 16px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --grigna-type-data-letter-spacing: 0em;
  --grigna-space-2xs: 4px;
  --grigna-space-xs: 8px;
  --grigna-space-sm: 12px;
  --grigna-space-md: 16px;
  --grigna-space-lg: 24px;
  --grigna-space-xl: 32px;
  --grigna-space-2xl: 48px;
  --grigna-space-3xl: 64px;
  --grigna-radius-control: 8px;
  --grigna-radius-card: 12px;
  --grigna-radius-overlay: 16px;
  --grigna-radius-pill: 999px;
  --grigna-size-touch-target: 44px;
  --grigna-size-text-min: 16px;
  --grigna-size-icon-sm: 16px;
  --grigna-size-icon-md: 20px;
  --grigna-size-icon-lg: 24px;
  --grigna-size-focus-ring: 2px;
  --grigna-size-page-max: 1200px;
  --grigna-size-card-min: 280px;
  --grigna-color-surface-default: #FFFFFF;
  --grigna-color-surface-subtle: #F7F8F7;
  --grigna-color-surface-raised: #FFFFFF;
  --grigna-color-surface-inverse: #1B1F1C;
  --grigna-color-border-default: #DDE1DE;
  --grigna-color-border-strong: #737A75;
  --grigna-color-text-default: #1B1F1C;
  --grigna-color-text-muted: #565D58;
  --grigna-color-text-disabled: #9AA19C;
  --grigna-color-text-inverse: #FFFFFF;
  --grigna-color-text-on-accent: #FFFFFF;
  --grigna-color-accent-default: #2F6B4F;
  --grigna-color-accent-hover: #275C44;
  --grigna-color-accent-subtle: #EEF5F1;
  --grigna-color-accent-text: #275C44;
  --grigna-color-focus-ring: #2F6B4F;
  --grigna-color-feedback-success-fill: #5B8A00;
  --grigna-color-feedback-success-bg: #F4F9E6;
  --grigna-color-feedback-success-text: #3F6100;
  --grigna-color-feedback-warning-fill: #9A7200;
  --grigna-color-feedback-warning-bg: #FDF6E3;
  --grigna-color-feedback-warning-text: #6E5100;
  --grigna-color-feedback-danger-fill: #C62828;
  --grigna-color-feedback-danger-bg: #FCEEEE;
  --grigna-color-feedback-danger-text: #8E1B1B;
  --grigna-color-feedback-info-fill: #2F5FA8;
  --grigna-color-feedback-info-bg: #EEF3FA;
  --grigna-color-feedback-info-text: #1F4176;
  --grigna-elevation-flat: none;
  --grigna-elevation-raised: 0px 1px 2px 0px #11141214, 0px 2px 8px 0px #1114120F;
  --grigna-elevation-overlay: 0px 8px 24px 0px #11141224, 0px 2px 6px 0px #11141214;
  --grigna-button-height: var(--grigna-size-touch-target);
  --grigna-button-height-sm: 36px;
  --grigna-button-padding-x: var(--grigna-space-md);
  --grigna-button-padding-x-sm: var(--grigna-space-sm);
  --grigna-button-gap: var(--grigna-space-xs);
  --grigna-button-radius: var(--grigna-radius-control);
  --grigna-button-font: var(--grigna-type-body-strong);
  --grigna-button-font-sm: var(--grigna-type-label);
  --grigna-button-primary-bg: var(--grigna-color-accent-default);
  --grigna-button-primary-bg-hover: var(--grigna-color-accent-hover);
  --grigna-button-primary-text: var(--grigna-color-text-on-accent);
  --grigna-button-secondary-bg: var(--grigna-color-surface-raised);
  --grigna-button-secondary-bg-hover: var(--grigna-color-surface-subtle);
  --grigna-button-secondary-border: var(--grigna-color-border-strong);
  --grigna-button-secondary-text: var(--grigna-color-text-default);
  --grigna-button-ghost-bg-hover: var(--grigna-color-accent-subtle);
  --grigna-button-ghost-text: var(--grigna-color-accent-text);
  --grigna-field-height: var(--grigna-size-touch-target);
  --grigna-field-padding-x: var(--grigna-space-sm);
  --grigna-field-radius: var(--grigna-radius-control);
  --grigna-field-gap: var(--grigna-space-xs);
  --grigna-field-font: var(--grigna-type-body);
  --grigna-field-label-font: var(--grigna-type-body-strong);
  --grigna-field-help-font: var(--grigna-type-caption);
  --grigna-field-bg: var(--grigna-color-surface-raised);
  --grigna-field-border: var(--grigna-color-border-strong);
  --grigna-field-border-focus: var(--grigna-color-focus-ring);
  --grigna-field-border-error: var(--grigna-color-feedback-danger-fill);
  --grigna-field-text: var(--grigna-color-text-default);
  --grigna-field-placeholder: var(--grigna-color-text-muted);
  --grigna-field-help-text: var(--grigna-color-text-muted);
  --grigna-field-error-text: var(--grigna-color-feedback-danger-text);
  --grigna-card-bg: var(--grigna-color-surface-raised);
  --grigna-card-border: var(--grigna-color-border-default);
  --grigna-card-radius: var(--grigna-radius-card);
  --grigna-card-padding: var(--grigna-space-md);
  --grigna-card-gap: var(--grigna-space-xs);
  --grigna-card-shadow: var(--grigna-elevation-raised);
  --grigna-card-shadow-hover: var(--grigna-elevation-overlay);
  --grigna-badge-height: 24px;
  --grigna-badge-padding-x: var(--grigna-space-xs);
  --grigna-badge-gap: var(--grigna-space-2xs);
  --grigna-badge-radius: var(--grigna-radius-pill);
  --grigna-badge-font: var(--grigna-type-label);
  --grigna-badge-neutral-bg: var(--grigna-color-surface-subtle);
  --grigna-badge-neutral-text: var(--grigna-color-text-muted);
  --grigna-badge-neutral-border: var(--grigna-color-border-default);
  --grigna-badge-accent-bg: var(--grigna-color-accent-subtle);
  --grigna-badge-accent-text: var(--grigna-color-accent-text);
  --grigna-badge-success-bg: var(--grigna-color-feedback-success-bg);
  --grigna-badge-success-text: var(--grigna-color-feedback-success-text);
  --grigna-badge-warning-bg: var(--grigna-color-feedback-warning-bg);
  --grigna-badge-warning-text: var(--grigna-color-feedback-warning-text);
  --grigna-badge-danger-bg: var(--grigna-color-feedback-danger-bg);
  --grigna-badge-danger-text: var(--grigna-color-feedback-danger-text);
  --grigna-badge-info-bg: var(--grigna-color-feedback-info-bg);
  --grigna-badge-info-text: var(--grigna-color-feedback-info-text);
  --grigna-accordion-bg: var(--grigna-color-surface-raised);
  --grigna-accordion-bg-hover: var(--grigna-color-surface-subtle);
  --grigna-accordion-border: var(--grigna-color-border-default);
  --grigna-accordion-icon: var(--grigna-color-text-muted);
  --grigna-accordion-text: var(--grigna-color-text-default);
  --grigna-accordion-radius: var(--grigna-radius-card);
  --grigna-accordion-min-height: var(--grigna-size-touch-target);
  --grigna-accordion-padding-x: var(--grigna-space-md);
  --grigna-accordion-padding-y: var(--grigna-space-sm);
  --grigna-accordion-gap: var(--grigna-space-sm);
  --grigna-accordion-summary-font: var(--grigna-type-body-strong);
  --grigna-accordion-content-font: var(--grigna-type-body);
  --grigna-placeholder-bg: var(--grigna-color-border-default);
  --grigna-placeholder-radius: var(--grigna-radius-pill);
  --grigna-chip-height: var(--grigna-size-touch-target);
  --grigna-chip-padding-x: var(--grigna-space-md);
  --grigna-chip-gap: var(--grigna-space-xs);
  --grigna-chip-radius: var(--grigna-radius-pill);
  --grigna-chip-font: var(--grigna-type-label);
  --grigna-chip-bg: var(--grigna-color-surface-raised);
  --grigna-chip-bg-hover: var(--grigna-color-surface-subtle);
  --grigna-chip-border: var(--grigna-color-border-strong);
  --grigna-chip-text: var(--grigna-color-text-default);
  --grigna-chip-selected-bg: var(--grigna-color-accent-subtle);
  --grigna-chip-selected-border: var(--grigna-color-accent-default);
  --grigna-chip-selected-text: var(--grigna-color-accent-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grigna-color-surface-default: #111412;
    --grigna-color-surface-subtle: #1B1F1C;
    --grigna-color-surface-raised: #2A2F2C;
    --grigna-color-surface-inverse: #F7F8F7;
    --grigna-color-border-default: #3F4541;
    --grigna-color-text-default: #F7F8F7;
    --grigna-color-text-muted: #C3C8C4;
    --grigna-color-text-disabled: #565D58;
    --grigna-color-text-inverse: #111412;
    --grigna-color-text-on-accent: #111412;
    --grigna-color-accent-default: #7DB596;
    --grigna-color-accent-hover: #ABD1BB;
    --grigna-color-accent-subtle: #10271D;
    --grigna-color-accent-text: #7DB596;
    --grigna-color-focus-ring: #7DB596;
    --grigna-color-feedback-success-fill: #A6D45A;
    --grigna-color-feedback-success-bg: #22300A;
    --grigna-color-feedback-success-text: #A6D45A;
    --grigna-color-feedback-warning-fill: #E9C04A;
    --grigna-color-feedback-warning-bg: #3D2D00;
    --grigna-color-feedback-warning-text: #E9C04A;
    --grigna-color-feedback-danger-fill: #EE9494;
    --grigna-color-feedback-danger-bg: #4A1010;
    --grigna-color-feedback-danger-text: #EE9494;
    --grigna-color-feedback-info-fill: #8DAEDD;
    --grigna-color-feedback-info-bg: #13284A;
    --grigna-color-feedback-info-text: #8DAEDD;
    --grigna-elevation-raised: 0px 1px 2px 0px #00000066;
    --grigna-elevation-overlay: 0px 8px 24px 0px #00000080;
  }
}

[data-theme="dark"] {
  --grigna-color-surface-default: #111412;
  --grigna-color-surface-subtle: #1B1F1C;
  --grigna-color-surface-raised: #2A2F2C;
  --grigna-color-surface-inverse: #F7F8F7;
  --grigna-color-border-default: #3F4541;
  --grigna-color-text-default: #F7F8F7;
  --grigna-color-text-muted: #C3C8C4;
  --grigna-color-text-disabled: #565D58;
  --grigna-color-text-inverse: #111412;
  --grigna-color-text-on-accent: #111412;
  --grigna-color-accent-default: #7DB596;
  --grigna-color-accent-hover: #ABD1BB;
  --grigna-color-accent-subtle: #10271D;
  --grigna-color-accent-text: #7DB596;
  --grigna-color-focus-ring: #7DB596;
  --grigna-color-feedback-success-fill: #A6D45A;
  --grigna-color-feedback-success-bg: #22300A;
  --grigna-color-feedback-success-text: #A6D45A;
  --grigna-color-feedback-warning-fill: #E9C04A;
  --grigna-color-feedback-warning-bg: #3D2D00;
  --grigna-color-feedback-warning-text: #E9C04A;
  --grigna-color-feedback-danger-fill: #EE9494;
  --grigna-color-feedback-danger-bg: #4A1010;
  --grigna-color-feedback-danger-text: #EE9494;
  --grigna-color-feedback-info-fill: #8DAEDD;
  --grigna-color-feedback-info-bg: #13284A;
  --grigna-color-feedback-info-text: #8DAEDD;
  --grigna-elevation-raised: 0px 1px 2px 0px #00000066;
  --grigna-elevation-overlay: 0px 8px 24px 0px #00000080;
}