/* ============================================================================
   Gusto · Design tokens — palette v3 "Tavola tortora minerale"
   Ripresi verbatim dal design system "gusto-design-system" (handoff Claude Design).
   4 famiglie + neutri tortora. Fraunces (display) + Inter (body), i font reali dell'app iOS.
   ============================================================================ */

/* — Webfont SELF-HOSTED: Fraunces (display) + Inter (body), i font reali dell'app iOS.
     Font variabili, ottici fissati via font-variation-settings (--fvs-display / --fvs-body).
     Serviti in locale e NON da Google Fonts: il CDN di Google esporrebbe l'IP dei visitatori
     a un terzo paese (v. provvedimenti del Garante privacy), in contrasto con la nostra
     policy "solo cookie tecnici, nessuna terza parte". Subset: latin + latin-ext. — */

/* Fraunces · italic · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces · italic · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces · normal · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces · normal · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter · italic · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter · italic · latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter · normal · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter · normal · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Sage · brand / CTA / positivo / proteine ── */
  --sage-50:  #ECF1E4;
  --sage-100: #DCE5D2;
  --sage-300: #A8BC92;
  --sage-500: #8FA67D;
  --sage-700: #4A6340;   /* CTA */
  --sage-900: #3B4F34;

  /* ── Tomato v3 "pomodoro smorzato" · negativo / sgarro / allergeni — MAI decorativo ── */
  --tomato-50:  #FBEDE9;
  --tomato-100: #F3DCD5;
  --tomato-300: #E5A493;
  --tomato-500: #CE4E3B;
  --tomato-700: #9C4437;
  --tomato-900: #7F3D33;

  /* ── Ambra v3 "miele smorzato" · food / carboidrati / pasti ── */
  --ambra-50:  #F9F1E4;
  --ambra-100: #F1E3C8;
  --ambra-300: #DDB077;
  --ambra-500: #B9873F;
  --ambra-700: #84663C;
  --ambra-900: #645031;

  /* ── Cool v3 "ardesia smorzata" · grassi / idratazione ── */
  --cool-50:  #EFF2F5;
  --cool-100: #E2E7EB;
  --cool-300: #C3CFD8;
  --cool-500: #8296A8;
  --cool-700: #556877;

  /* ── Neutri v3 · superfici tortora minerale ── */
  --surface-base:   #F1EFEB;  /* fondo pagina */
  --surface-alt:    #E9E6E1;  /* sezioni alternate, ghost button */
  --surface-tint:   #F7F5F2;  /* tinta leggera su bianco */
  --surface-raised: #FFFFFF;  /* card */
  --surface-deep:   #DAD5CC;  /* tortora pieno: tag, avatar bg */

  /* ── Neutri · bordi ── */
  --border-soft:   #DCD8D0;  /* hairline card su base */
  --border-strong: #C6C1B8;  /* input, ghost button, divisori marcati */
  --border-track:  #E7E4DE;  /* track di progress bar */

  /* ── Neutri · testo ── */
  --text-primary:   #1F1E1C;
  --text-secondary: #5A5955;
  --text-tertiary:  #8A8880;
  --text-muted:     #6E6A5F;  /* SOLO su base/alt */
  --text-inverse:   #FFFFFF;

  /* ── Alias semantici ── */
  --brand:          var(--sage-700);
  --cta-bg:         var(--sage-700);
  --cta-fg:         var(--text-inverse);
  --positive:       var(--sage-700);
  --positive-soft:  var(--sage-50);
  --positive-text:  var(--sage-900);
  --negative:       var(--tomato-500);
  --negative-soft:  var(--tomato-50);
  --negative-text:  var(--tomato-700);

  --macro-protein:  var(--sage-700);
  --macro-carbs:    var(--ambra-500);
  --macro-fat:      var(--cool-500);
  --water:          var(--cool-500);
  --water-fill:     var(--cool-300);

  --meal-breakfast: var(--ambra-300);
  --meal-lunch:     var(--ambra-500);
  --meal-dinner:    var(--ambra-700);

  --focus-ring: color-mix(in srgb, var(--sage-500) 55%, transparent);

  /* ── Tipografia — Fraunces (display) + Inter (body) ── */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fvs-display: "opsz" 72;   /* Fraunces 72pt */
  --fvs-body: "opsz" 18;      /* Inter 18pt */

  /* Pesi (Fraunces "medium" → SemiBold 600) */
  --w-display-regular: 400;
  --w-display-semibold: 600;
  --w-display-bold: 700;
  --w-display-black: 900;
  --w-body-regular: 400;
  --w-body-medium: 500;
  --w-body-semibold: 600;
  --w-body-bold: 700;

  /* Scala tipografica (iOS-derived) — display = Fraunces, resto = Inter */
  --text-hero:     600 34px/40px var(--font-display);
  --text-title1:   700 28px/34px var(--font-display);
  --text-title2:   600 22px/28px var(--font-display);
  --text-headline: 600 17px/22px var(--font-display);
  --text-body:     400 15px/21px var(--font-sans);
  --text-subhead:  500 13px/18px var(--font-sans);
  --text-caption:  400 12px/16px var(--font-sans);
  --text-overline: 600 11px/14px var(--font-sans);

  --tracking-overline: 0.06em;
  --tracking-tight: -0.01em;

  /* ── Spazio — base 4 ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Raggi ── */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* ── Ombre + hairline ── */
  --shadow-card:  0 1px 2px rgba(31, 30, 28, 0.04), 0 6px 16px rgba(31, 30, 28, 0.05);
  --shadow-float: 0 2px 6px rgba(31, 30, 28, 0.07), 0 12px 28px rgba(31, 30, 28, 0.09);
  --hairline: 1px solid var(--border-soft);

  /* ── Chrome flottante (nav) ── */
  --chrome-tint: rgba(247, 245, 242, 0.78);
  --chrome-blur: saturate(180%) blur(20px);

  /* ── Banner + thumbnail pasto ── */
  --banner-border-alpha: 16%;      /* bordo banner = colore famiglia @ 16% */
  --meal-gradient-angle: 135deg;   /* gradiente thumbnail pasto */

  /* ── Motion — sobrio, ease-out iOS ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
}

/* ============================================================================
   Dark mode — DERIVATA (l'handoff v3 è solo light; valori inferiti dal DS).
   Si attiva sulla preferenza di sistema. Tortora minerale scura e calda,
   famiglie 300–900 ricalibrate per il buio.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Neutri · superfici tortora scura */
    --surface-base:   #171511;
    --surface-alt:    #1E1C17;
    --surface-tint:   #23211B;
    --surface-raised: #211F19;
    --surface-deep:   #34312A;

    /* Neutri · bordi */
    --border-soft:   #322F28;
    --border-strong: #454138;
    --border-track:  #2C2A24;

    /* Neutri · testo */
    --text-primary:   #F1EFE9;
    --text-secondary: #B7B3AB;
    --text-tertiary:  #8B877E;
    --text-muted:     #A29C8E;

    /* Tinte soft di famiglia (-50/-100) → profonde */
    --sage-50:    #232B1E;
    --sage-100:   #2B3524;
    --tomato-50:  #33211D;
    --tomato-100: #3F2822;
    --ambra-50:   #2C2517;
    --ambra-100:  #38301D;
    --cool-50:    #1F252A;
    --cool-100:   #273037;

    /* Famiglie 300–900 ricalibrate per il buio */
    --sage-300:   #B0C29C;
    --sage-500:   #99AE88;
    --sage-700:   #5C7451;
    --sage-900:   #475C3F;
    --tomato-300: #E9AF9F;
    --tomato-500: #D8604D;
    --tomato-700: #AE5346;
    --tomato-900: #8E4A3F;
    --ambra-300:  #E1B885;
    --ambra-500:  #C4934F;
    --ambra-700:  #957648;
    --ambra-900:  #75613F;
    --cool-300:   #CAD5DD;
    --cool-500:   #8FA3B4;
    --cool-700:   #687C8C;

    /* Alias ricalibrati */
    --brand:          var(--sage-300);
    --positive:       var(--sage-300);
    --positive-text:  #C6D4B6;
    --negative-text:  var(--tomato-300);
    --macro-protein:  var(--sage-500);

    /* Chrome + ombre */
    --chrome-tint:  rgba(30, 28, 23, 0.72);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.32);
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);
  }
}