/* =========================================================================
   Aura Design System — Source-of-truth tokens
   iOS 26 native (SwiftUI) · diário de bebê privado · pt-BR puro
   ========================================================================= */

/* ---------- Fonts ---------- */
/* v4 SPLIT — decision pragmatic, padrão editorial.
   DISPLAY tokens (largeTitle, title1-3, headline 17pt, heroMetric) use Plus Jakarta Sans.
   TEXT tokens (body, callout, subhead, footnote, caption) use SF Pro Text
     (SF Pro wins legibility at iOS body sizes).
   PJS: variable 200–800, SIL OFL · humanist-geometric warm · tabular figures confirmed.

   BRAND FONTS — local variable .ttf files (replace Google Fonts CDN substitute).
   Both files are variable fonts (fvar table), spanning weight 200–800.
*/
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype-variations"),
       url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic.ttf") format("truetype-variations"),
       url("fonts/PlusJakartaSans-Italic.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-display: "Plus Jakarta Sans", "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* =========================================================================
   COLOR TOKENS — light is the default; dark overrides via .dark or media
   ========================================================================= */
:root {
  /* Canvas scale — v4 documents full ramp (was "--canvas" only in v3) */
  --canvas-100:    #FAF6EE;   /* base canvas, warm off-white, never cool gray */
  --canvas-200:    #F4EEE3;   /* one step deeper — AuraMlField chip fill, recessed surfaces */
  --canvas-300:    #EBE3D4;   /* two steps deeper — CloudKit debug card, deepest neutral */
  --canvas:        var(--canvas-100); /* alias, backwards-compatible */
  --card-fill:     #FFFCF6;   /* card body, slightly warmer than canvas-100 */
  --hairline:      rgba(74, 58, 40, 0.10);

  /* Liquid Glass — opacity tied to system contrast preference */
  --glass-thin:    rgba(255, 252, 246, 0.45);
  --glass-regular: rgba(255, 252, 246, 0.62);
  --glass-thick:   rgba(255, 252, 246, 0.78);
  --glass-blur:    blur(28px) saturate(140%);

  /* Ink scale — warm grays */
  --ink-900: #2A2520;  /* primary text */
  --ink-700: #4A413A;  /* secondary text */
  --ink-500: #756B62;  /* tertiary / captions */
  --ink-300: #A89F95;  /* disabled */

  /* Domain — feed (peito) — rose */
  --feed:      #EB8C9F;
  --feed-soft: #F7D6DD;
  --feed-ink:  #8E3D4D;

  /* Domain — bottle (mamadeira) — âmbar mel · NUNCA azul iOS
     bottle       = chip/soft contexts (softer amber)
     bottle-amber = UI/large contexts ≥3:1 (icons, strong fills) */
  --bottle:        #E8B98A;
  --bottle-amber:  #BE7E2A;
  --bottle-soft:   #F6E1CB;
  --bottle-ink:    #875530;

  /* Domain — relac (relactador) — malva · NUNCA magenta */
  --relac:      #9B7BB0;
  --relac-soft: #E6DCEB;
  --relac-ink:  #5A4467;

  /* Domain — pee (xixi) — honey-yellow · NUNCA cyan */
  --pee:      #F2C733;
  --pee-soft: #FAEAB4;
  --pee-ink:  #7A5E0E;

  /* Domain — poop (cocô) — terracota */
  --poop:      #B57B4E;
  --poop-soft: #E8D2BC;
  --poop-ink:  #5C3A1F;

  /* Domain — sleep (sono) — lavender quieto */
  --sleep:        #C7C5E6;
  --sleep-soft:   #E6E5F2;
  --sleep-ink:    #4A4773;
  --sleep-night:  #4A4773;

  /* Domain — bio (biometria) — sálvia */
  --bio:      #A8C0A6;
  --bio-soft: #DDE7DA;
  --bio-ink:  #3F5A3D;

  /* Domain — acalmar (hub SOS Choro) — terracota queimada · 8º hue (v1.43.0)
     Mais alaranjado e saturado que poop (cocô) — poop é marrom-bege, acalmar é
     terracota-rust — pra manter os dois distinguíveis lado a lado.
     acalmar-ink #7C3A17 sobre acalmar-soft #F3DAC8 = ~6.4:1 (AA body). */
  --acalmar:      #C2693A;
  --acalmar-soft: #F3DAC8;
  --acalmar-ink:  #7C3A17;

  /* Signal — sparingly */
  --signal-stop: #B8482F;
  --signal-care: #C2693A;
  --signal-ok:   #6B8E5A;

  /* Orb gradient — peça-marca, repete em vários lugares */
  --orb-gradient: radial-gradient(60% 60% at 40% 30%,
                  #FFFFFF 0%, #F6E1CB 50%, #B89BC4 100%);

  /* Shadow — warm-tinted, muito sutil */
  --shadow-card:
    0 4px 14px -8px rgba(74, 58, 40, 0.10),
    0 1px 3px  -1px rgba(74, 58, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-pressed:
    0 1px 2px -1px rgba(74, 58, 40, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-orb:
    0 12px 28px -14px rgba(184, 155, 196, 0.55),
    0 4px 10px  -6px rgba(74, 58, 40, 0.10);

  /* Radii */
  --r-row:  12px;
  --r-card: 18px;
  --r-hero: 24px;
  --r-pill: 999px;

  /* Spacing 4pt baseline */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  /* Spacing semantic aliases — v4. Answers "qual s pra que?" no design system, não em cada consumer */
  --tight-gap:    var(--s1);  /* 4pt  — label + value visualmente acoplados */
  --content-gap:  var(--s2);  /* 8pt  — eyebrow → conteúdo */
  --card-padding: var(--s4);  /* 16pt — padding interno de card */
  --card-gap:     var(--s5);  /* 20pt — entre sibling cards em scroll feed */

  /* Motion */
  --ease-comfort: cubic-bezier(0.32, 0.72, 0.32, 1);
  --dur-comfort:  220ms;
  --dur-minimal:   90ms;
}

/* ---------- Dark mode ---------- */
.dark, [data-theme="dark"] {
  --canvas-100: #1B1813;
  --canvas-200: #251F18;
  --canvas-300: #332A20;
  --canvas:     #1B1813;
  --card-fill:  #2A2520;
  --hairline:   rgba(244, 236, 223, 0.10);

  --glass-thin:    rgba(42, 37, 32, 0.55);
  --glass-regular: rgba(42, 37, 32, 0.72);
  --glass-thick:   rgba(42, 37, 32, 0.85);

  --ink-900: #F4ECDF;
  --ink-700: #C8B79E;
  --ink-500: #A09280;
  --ink-300: #6F6357;

  --feed:      #C97586;  --feed-soft: #3B2228;  --feed-ink:  #F0A8B7;
  --bottle:    #B5793A;  --bottle-amber: #B5793A;
  --bottle-soft: #3A2D1E;  --bottle-ink: #D6A36F;
  --relac:     #8770A0;  --relac-soft: #2E2535; --relac-ink: #B59FCC;
  --pee:       #D0AD3B;  --pee-soft:   #3B321A; --pee-ink:   #E5C96A;
  --poop:      #B58A6E;  --poop-soft:  #3A2A1D; --poop-ink:  #D9B79A;
  --sleep:     #9692B8;  --sleep-soft: #28263A; --sleep-ink: #C9C5DF;
  --sleep-night: #3D3B5C;
  --bio:       #8DA88A;  --bio-soft:   #232C22; --bio-ink:   #A8C0A6;
  --acalmar:   #CB7A4A;  --acalmar-soft: #3A271B; --acalmar-ink: #E2A87C;

  --signal-stop: #D86955;
  --signal-care: #D88350;
  --signal-ok:   #8FB37A;

  --shadow-card:
    0 4px 14px -8px rgba(0, 0, 0, 0.50),
    0 1px 3px  -1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas-100: #1B1813;
    --canvas-200: #251F18;
    --canvas-300: #332A20;
    --canvas:     #1B1813;
    --card-fill:  #2A2520;
    --hairline:   rgba(244, 236, 223, 0.10);
    --glass-thin:    rgba(42, 37, 32, 0.55);
    --glass-regular: rgba(42, 37, 32, 0.72);
    --glass-thick:   rgba(42, 37, 32, 0.85);
    --ink-900: #F4ECDF; --ink-700: #C8B79E; --ink-500: #A09280; --ink-300: #6F6357;
    --feed: #C97586; --feed-soft: #3B2228; --feed-ink: #F0A8B7;
    --bottle: #B5793A; --bottle-amber: #B5793A; --bottle-soft: #3A2D1E; --bottle-ink: #D6A36F;
    --relac: #8770A0; --relac-soft: #2E2535; --relac-ink: #B59FCC;
    --pee: #D0AD3B; --pee-soft: #3B321A; --pee-ink: #E5C96A;
    --poop: #B58A6E; --poop-soft: #3A2A1D; --poop-ink: #D9B79A;
    --sleep: #9692B8; --sleep-soft: #28263A; --sleep-ink: #C9C5DF; --sleep-night: #3D3B5C;
    --bio: #8DA88A; --bio-soft: #232C22; --bio-ink: #A8C0A6;
    --acalmar: #CB7A4A; --acalmar-soft: #3A271B; --acalmar-ink: #E2A87C;
    --signal-stop: #D86955; --signal-care: #D88350; --signal-ok: #8FB37A;
  }
}

/* =========================================================================
   TYPE SCALE — Plus Jakarta Sans (variable). SF Pro as fallback.
   ========================================================================= */
:root {
  /* DISPLAY tier — Plus Jakarta Sans, semibold (weight 600).
     v4 inclui headline 17pt como display: card titles + row primaries pegam
     o peso humanist mesmo em body size. Decisão de identidade editorial. */
  --t-large-title: 600 34px/1.12 var(--font-display);
  --t-title-1:     600 28px/1.18 var(--font-display);
  --t-title-2:     600 22px/1.27 var(--font-display);
  --t-title-3:     600 20px/1.30 var(--font-display);
  --t-headline:    600 17px/1.30 var(--font-display);

  /* TEXT tier — SF Pro Text / system. Regular + medium. */
  --t-body:     400 17px/1.41 var(--font-text);
  --t-callout:  400 16px/1.44 var(--font-text);
  --t-subhead:  500 15px/1.47 var(--font-text);
  --t-footnote: 400 13px/1.38 var(--font-text);

  /* Editorial caption — ALL CAPS, 0.06em tracking */
  --t-caption-tracking: 0.06em;

  /* Hero metric — tabular figures, monospacedDigit */
  --t-hero-metric: 600 40px/1.0 var(--font-display);
  --hero-feat: "tnum" 1, "lnum" 1;
}

/* =========================================================================
   SEMANTIC ELEMENT MAPPING — utility classes mirroring SwiftUI Font.*
   ========================================================================= */
.aura-canvas { background: var(--canvas); color: var(--ink-900); font: var(--t-body); }
.aura-card   { background: var(--card-fill); border-radius: var(--r-card);
               box-shadow: var(--shadow-card); padding: var(--s4); }
.aura-glass  { background: var(--glass-regular); backdrop-filter: var(--glass-blur);
               -webkit-backdrop-filter: var(--glass-blur);
               border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.aura-hero   { border-radius: var(--r-hero); padding: var(--s6); }

h1, .h1, .aura-large-title { font: var(--t-large-title); color: var(--ink-900); letter-spacing: -0.02em; }
h2, .h2, .aura-title-1     { font: var(--t-title-1);     color: var(--ink-900); letter-spacing: -0.015em; }
h3, .h3, .aura-title-2     { font: var(--t-title-2);     color: var(--ink-900); letter-spacing: -0.01em; }
h4, .h4, .aura-title-3     { font: var(--t-title-3);     color: var(--ink-900); letter-spacing: -0.005em; }
.aura-headline             { font: var(--t-headline);    color: var(--ink-900); letter-spacing: -0.005em; }
p,  .aura-body             { font: var(--t-body);        color: var(--ink-700); }
.aura-callout              { font: var(--t-callout);     color: var(--ink-700); }
.aura-subhead              { font: var(--t-subhead);     color: var(--ink-700); }
.aura-footnote             { font: var(--t-footnote);    color: var(--ink-500); }

.aura-caption {
  font: 500 12px/1.2 var(--font-text);
  letter-spacing: var(--t-caption-tracking);
  text-transform: uppercase;
  color: var(--ink-500);
}

.aura-hero-metric {
  font: var(--t-hero-metric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--hero-feat);
  color: var(--ink-900);
  letter-spacing: -0.02em;
  text-align: right;
}

/* Orb — the brand piece */
.aura-orb {
  background: var(--orb-gradient);
  border-radius: 50%;
  box-shadow: var(--shadow-orb);
  aspect-ratio: 1 / 1;
}

/* Motion: respeita Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-comfort: var(--dur-minimal);
    --ease-comfort: linear;
  }
}