/* ============================================================
   Il Quinto Giorno — Colors & Type
   Source: lib/theme/app_theme.dart (Flutter, Material 3)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand palette (raw) ---------- */
  --iqg-amber:        #C8841A;  /* primary — egg yolk, honeycomb */
  --iqg-olive:        #6B7F47;  /* secondary — leaves, "confirmed" */
  --iqg-warm-beige:   #F5EDD5;  /* surface / scaffold background */
  --iqg-sand:         #D4C5A9;  /* dividers, borders, disabled */
  --iqg-text-dark:    #2D2D2D;  /* body text */
  --iqg-brand-brown:  #5C3D0A;  /* display headlines, app-bar text */
  --iqg-error:        #E85D3A;  /* terracotta, destructive */
  --iqg-white:        #FFFFFF;  /* cards */

  /* Tinted helpers (matching .withValues(alpha:) usage in source) */
  --iqg-amber-15:     rgba(200, 132, 26, 0.15);
  --iqg-olive-15:     rgba(107, 127, 71, 0.15);
  --iqg-error-10:     rgba(232, 93, 58, 0.10);
  --iqg-error-30:     rgba(232, 93, 58, 0.30);
  --iqg-amber-50:     rgba(200, 132, 26, 0.50);
  --iqg-olive-50:     rgba(107, 127, 71, 0.50);

  /* Social accents (only places non-brand color is used) */
  --iqg-facebook:     #1877F2;
  --iqg-instagram:    #E1306C;

  /* ---------- Semantic foreground / background ---------- */
  --bg:               var(--iqg-warm-beige);
  --bg-elevated:      var(--iqg-white);
  --fg:               var(--iqg-text-dark);
  --fg-muted:         #6E6E6E;
  --fg-display:       var(--iqg-brand-brown);
  --accent:           var(--iqg-amber);
  --accent-soft:      var(--iqg-sand);
  --success:          var(--iqg-olive);
  --danger:           var(--iqg-error);
  --border:           var(--iqg-sand);
  --border-strong:    var(--iqg-amber);

  /* ---------- Typography ----------
     Original: Material 3 default 'Roboto' for body + 'Georgia' for display.
     We map Georgia → Lora (closest free transitional serif on Google Fonts)
     and Roboto → Nunito (the Material defaults render as system stack here;
     Nunito gives the friendly, slightly rounded body voice the app uses).
     SUBSTITUTION FLAGGED — see README. */
  --font-display: 'Lora', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Nunito', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — derived from app_theme.dart TextTheme + screen usages */
  --fs-display-xl: 26px; /* confirmation headline */
  --fs-h1:         24px; /* onboarding "Ciao! Come ti chiami?" */
  --fs-h2:         22px; /* splash logotype */
  --fs-h3:         20px; /* AppBar title */
  --fs-stat:       28px; /* admin stat numbers (Georgia) */
  --fs-stock:      36px; /* admin daily stock big number */
  --fs-body-lg:    16px; /* bodyLarge */
  --fs-body:       15px; /* default */
  --fs-body-sm:    14px; /* bodyMedium */
  --fs-meta:       13px; /* card sub-info, hints */
  --fs-overline:   12px; /* uppercase section labels */
  --fs-tag:        11px; /* RIEPILOGO, GIACENZA */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --tracking-overline: 1px;     /* card section labels */
  --tracking-summary:  1.5px;   /* RIEPILOGO etc. */
  --tracking-logotype: 2px;     /* IL QUINTO GIORNO */

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ---------- Radii ---------- */
  --r-pill:   30px;   /* pill buttons (52h) and stepper container */
  --r-button: 26px;   /* primary/outlined buttons */
  --r-card:   16px;   /* Card */
  --r-field:  12px;   /* TextField, banners */
  --r-chip:   20px;   /* StatusBadge */
  --r-stock:   8px;   /* admin stock +/- buttons */

  /* ---------- Elevations / shadows ----------
     Source uses elevation:0 for cards (border instead) and elevation:8 only
     on the bottom nav. Keep shadows minimal — define a single soft lift. */
  --shadow-card:   0 1px 0 var(--iqg-sand);                 /* hairline, matches border-only cards */
  --shadow-nav:    0 -2px 12px rgba(92, 61, 10, 0.06);      /* bottom nav lift */
  --shadow-button: 0 2px 0 rgba(92, 61, 10, 0.08);          /* subtle press shadow */

  /* ---------- Motion ---------- */
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); /* Curves.elasticOut analog */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     180ms;
  --dur-base:     300ms;  /* QuantityStepper bounce */
  --dur-splash:   1800ms; /* SplashScreen */
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--fg-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0; }
small, .meta { font-size: var(--fs-meta); color: var(--fg); }

/* Uppercase section label — used inside every card in the app */
.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  color: var(--accent);
  text-transform: uppercase;
}
.overline--olive { color: var(--success); letter-spacing: var(--tracking-summary); }

/* Logotype */
.logotype {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-logotype);
  color: var(--fg-display);
  text-transform: uppercase;
}