/**
 * Food Lab OS — Design Tokens
 * Single source of truth (FL-DS-TOKENS LOCKED — CR-0013):
 * Color · Typography · Spacing/Radius · Elevation/Motion
 */

:root {
  /*
   * Neutri caldi — allineati a Material Identity (avorio / carta / taupe / grafite).
   * Vietato reintrodurre slate / steel / azzurro ERP come substrate di sistema.
   */
  --fl-bg-app: #f7f5f2;
  --fl-bg-surface: #fffcf9;
  --fl-bg-subtle: #f1ece6;
  --fl-bg-muted: #e8e3dc;

  --fl-border-soft: #ded9d4;
  --fl-border-default: #d5d0ca;
  --fl-border-strong: #b0a79e;

  --fl-text-primary: #2d2623;
  --fl-text-secondary: #5c5550;
  --fl-text-muted: #8a837c;
  --fl-text-disabled: #a89f96;
  --fl-text-inverse: #fffcf9;

  /* ── Semantici (stato, non decorazione) ── */
  --fl-success: #168a4a;
  --fl-success-soft: #eaf7ef;

  --fl-warning: #c98212;
  --fl-warning-soft: #fff6df;

  --fl-danger: #c53b3b;
  --fl-danger-soft: #fcecec;

  /* Info: dusty warm verify (mai azzurro ERP) */
  --fl-info: #8a6a3a;
  --fl-info-soft: #f2e0c6;

  /* ── Brand shell (legacy navy → warm grafite) ── */
  --fl-navy: #2d2623;
  --fl-navy-light: #5c5550;
  --fl-gold: #c9a84c;
  --fl-gold-hover: #b8953f;

  /* ── Business Unit ── */
  --fl-bu-wedding: #b76e79;
  --fl-bu-wedding-soft: #fbeef1;
  --fl-bu-wedding-accent: #c9a84c;

  /* Corporate: warm charcoal / carta (mai steel / teal ERP) */
  --fl-bu-corporate: #5c5550;
  --fl-bu-corporate-soft: #f1ece6;
  --fl-bu-corporate-muted: #8a837c;

  /* Fair: olive MI (allineato a data-bu=fair) */
  --fl-bu-fair: #7d8f74;
  --fl-bu-fair-soft: #e8efe8;
  --fl-bu-fair-muted: #5f6b5b;

  --fl-bu-other: #c06040;
  --fl-bu-other-soft: #fdf0eb;

  --fl-bu-produzioni: #9a7048;
  --fl-bu-produzioni-soft: #f2e4d4;

  /* ── Spaziature — scale (FL-DS-SPACING-RADIUS) ── */
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-5: 24px;
  --fl-space-6: 32px;
  --fl-space-7: 48px;
  --fl-space-8: 64px;

  /* Semantic spacing aliases */
  --fl-space-inset-2xs: var(--fl-space-1);   /* tight internal padding */
  --fl-space-inset-xs: var(--fl-space-2);
  --fl-space-inset-sm: var(--fl-space-3);
  --fl-space-inset-md: var(--fl-space-4);    /* default component padding */
  --fl-space-inset-lg: var(--fl-space-5);

  --fl-space-stack-xs: var(--fl-space-2);    /* stack / component gap */
  --fl-space-stack-sm: var(--fl-space-3);
  --fl-space-stack-md: var(--fl-space-4);
  --fl-space-stack-lg: var(--fl-space-5);

  --fl-space-inline-xs: var(--fl-space-2);   /* horizontal gap between inline items */
  --fl-space-inline-sm: var(--fl-space-3);
  --fl-space-inline-md: var(--fl-space-4);

  --fl-space-section: var(--fl-space-6);     /* section gap */
  --fl-space-page: var(--fl-space-5);        /* page mount padding (F4 typical) */
  --fl-space-grid: var(--fl-space-3);        /* default grid gap */

  /* Density: same scale, choose lower/higher steps — not a second system */
  --fl-space-density-compact-stack: var(--fl-space-2);
  --fl-space-density-default-stack: var(--fl-space-3);
  --fl-space-density-comfortable-stack: var(--fl-space-4);

  /* ── Border radius (FL-DS-SPACING-RADIUS) ── */
  --fl-radius-none: 0;
  --fl-radius-xs: 4px;
  --fl-radius-sm: 8px;       /* S */
  --fl-radius-md: 12px;      /* M */
  --fl-radius-lg: 18px;      /* L */
  --fl-radius-xl: 22px;      /* XL */
  --fl-radius-full: 999px;   /* Full / pill */
  --fl-radius-pill: var(--fl-radius-full); /* alias */

  /* ── Elevation primitives + semantic roles (FL-DS-ELEVATION-MOTION) ── */
  --fl-shadow-sm: 0 1px 2px rgba(45, 38, 35, 0.04), 0 0 0 1px rgba(45, 38, 35, 0.02);
  --fl-shadow-md: 0 4px 12px rgba(45, 38, 35, 0.06), 0 0 0 1px rgba(45, 38, 35, 0.03);
  --fl-shadow-lg: 0 16px 40px rgba(45, 38, 35, 0.1), 0 0 0 1px rgba(45, 38, 35, 0.04);

  --fl-elevation-none: none;
  --fl-elevation-subtle: var(--fl-shadow-sm);
  --fl-elevation-soft: var(--fl-shadow-sm);
  --fl-elevation-raised: var(--fl-shadow-md);
  --fl-elevation-overlay: var(--fl-shadow-md);
  --fl-elevation-modal: var(--fl-shadow-lg);

  /* ── Z-index layer hints (non-decorative; overlays/modals) ── */
  --fl-z-base: 0;
  --fl-z-raised: 10;
  --fl-z-overlay: 40;
  --fl-z-modal: 50;
  --fl-z-toast: 60;

  /* ── Tipografia — scale ── */
  --fl-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --fl-text-xs: 12px;
  --fl-text-sm: 13px;
  --fl-text-base: 15px;
  --fl-text-md: 16px;
  --fl-text-lg: 18px;
  --fl-text-xl: 22px;
  --fl-text-2xl: 28px;
  --fl-text-3xl: 36px;

  --fl-leading-tight: 1.2;
  --fl-leading-snug: 1.35;
  --fl-leading-normal: 1.5;

  --fl-weight-regular: 400;
  --fl-weight-medium: 500;
  --fl-weight-semibold: 600;
  --fl-weight-bold: 700;

  --fl-tracking-tight: -0.02em;
  --fl-tracking-normal: 0;
  --fl-tracking-wide: 0.06em;
  --fl-tracking-wider: 0.12em;

  /* ── Tipografia — ruoli semantici (FL-DS-TYPOGRAPHY) ── */
  --fl-type-display-size: var(--fl-text-3xl);
  --fl-type-display-weight: var(--fl-weight-bold);
  --fl-type-display-leading: var(--fl-leading-tight);
  --fl-type-display-tracking: var(--fl-tracking-tight);

  --fl-type-h1-size: var(--fl-text-2xl);
  --fl-type-h1-weight: var(--fl-weight-bold);
  --fl-type-h1-leading: var(--fl-leading-tight);
  --fl-type-h1-tracking: var(--fl-tracking-tight);

  --fl-type-h2-size: var(--fl-text-xl);
  --fl-type-h2-weight: var(--fl-weight-semibold);
  --fl-type-h2-leading: var(--fl-leading-tight);
  --fl-type-h2-tracking: var(--fl-tracking-tight);

  --fl-type-h3-size: var(--fl-text-lg);
  --fl-type-h3-weight: var(--fl-weight-semibold);
  --fl-type-h3-leading: var(--fl-leading-snug);
  --fl-type-h3-tracking: var(--fl-tracking-normal);

  --fl-type-section-size: var(--fl-text-lg);
  --fl-type-section-weight: var(--fl-weight-semibold);
  --fl-type-section-leading: var(--fl-leading-snug);
  --fl-type-section-tracking: var(--fl-tracking-normal);

  --fl-type-body-lg-size: var(--fl-text-md);
  --fl-type-body-lg-weight: var(--fl-weight-regular);
  --fl-type-body-lg-leading: var(--fl-leading-normal);
  --fl-type-body-lg-tracking: var(--fl-tracking-normal);

  --fl-type-body-size: var(--fl-text-base);
  --fl-type-body-weight: var(--fl-weight-regular);
  --fl-type-body-leading: var(--fl-leading-normal);
  --fl-type-body-tracking: var(--fl-tracking-normal);

  --fl-type-body-sm-size: var(--fl-text-sm);
  --fl-type-body-sm-weight: var(--fl-weight-regular);
  --fl-type-body-sm-leading: var(--fl-leading-normal);
  --fl-type-body-sm-tracking: var(--fl-tracking-normal);

  --fl-type-label-size: var(--fl-text-sm);
  --fl-type-label-weight: var(--fl-weight-medium);
  --fl-type-label-leading: var(--fl-leading-snug);
  --fl-type-label-tracking: var(--fl-tracking-normal);

  --fl-type-caption-size: var(--fl-text-xs);
  --fl-type-caption-weight: var(--fl-weight-regular);
  --fl-type-caption-leading: var(--fl-leading-snug);
  --fl-type-caption-tracking: var(--fl-tracking-normal);

  --fl-type-overline-size: var(--fl-text-xs);
  --fl-type-overline-weight: var(--fl-weight-medium);
  --fl-type-overline-leading: var(--fl-leading-snug);
  --fl-type-overline-tracking: var(--fl-tracking-wider);

  --fl-type-kpi-size: var(--fl-text-2xl);
  --fl-type-kpi-weight: var(--fl-weight-bold);
  --fl-type-kpi-leading: var(--fl-leading-tight);
  --fl-type-kpi-tracking: var(--fl-tracking-tight);

  --fl-type-mono-family: var(--fl-font-mono);
  --fl-type-mono-size: var(--fl-text-sm);
  --fl-type-mono-weight: var(--fl-weight-regular);
  --fl-type-mono-leading: var(--fl-leading-normal);
  --fl-type-mono-tracking: var(--fl-tracking-normal);

  /* ── Motion (FL-DS-ELEVATION-MOTION) ── */
  --fl-duration-fast: 120ms;
  --fl-duration-base: 180ms;
  --fl-duration-slow: 240ms;

  --fl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --fl-easing-standard: var(--fl-ease-standard);
  --fl-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --fl-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Semantic motion durations (state change, not decoration) */
  --fl-motion-hover-duration: var(--fl-duration-fast);
  --fl-motion-focus-duration: var(--fl-duration-fast);
  --fl-motion-pressed-duration: var(--fl-duration-fast);
  --fl-motion-disabled-duration: 0ms;
  --fl-motion-loading-duration: var(--fl-duration-slow);
  --fl-motion-enter-duration: var(--fl-duration-base);
  --fl-motion-exit-duration: var(--fl-duration-fast);
  --fl-motion-expand-duration: var(--fl-duration-base);
  --fl-motion-collapse-duration: var(--fl-duration-base);
  --fl-motion-fade-duration: var(--fl-duration-base);
  --fl-motion-scale-duration: var(--fl-duration-fast);

  /* Opacity endpoints for fade (components compose transition) */
  --fl-motion-fade-from: 0;
  --fl-motion-fade-to: 1;
  --fl-motion-scale-from: 0.98;
  --fl-motion-scale-to: 1;

  /* ── Focus (warm taupe, mai azzurro) ── */
  --fl-focus-ring: 0 0 0 2px var(--fl-bg-surface), 0 0 0 4px rgba(176, 167, 158, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fl-duration-fast: 0ms;
    --fl-duration-base: 0ms;
    --fl-duration-slow: 0ms;
    --fl-motion-hover-duration: 0ms;
    --fl-motion-focus-duration: 0ms;
    --fl-motion-pressed-duration: 0ms;
    --fl-motion-loading-duration: 0ms;
    --fl-motion-enter-duration: 0ms;
    --fl-motion-exit-duration: 0ms;
    --fl-motion-expand-duration: 0ms;
    --fl-motion-collapse-duration: 0ms;
    --fl-motion-fade-duration: 0ms;
    --fl-motion-scale-duration: 0ms;
  }
}