/* ============================================================
   Vila — Colors & Type
   Design tokens. Import this file on any page to get the brand.
   ============================================================ */

/* ─── Typefaces ────────────────────────────────────────────── */
/* Display — Outfit (brand font, bundled locally).
   Variable-weight TTF, 100–900, served from assets/fonts.
   Used for titles, hero headlines, big numbers.

   Body — Inter (product) / Source Serif 4 (marketing), Google
   Fonts OFL. The wordmark itself is custom-drawn, not typeset. */

/* NB: file lives at assets/fonts/…; path is written relative to
   *this* stylesheet so it resolves from preview/ too. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("assets/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/SourceSerif4-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("assets/fonts/SourceSerif4-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ─── Brand primitives ─────────────────────────────────── */
  --vila-plum:        #503B4E; /* brand primary — wordmark, headlines, core UI */
  --vila-plum-ink:    #2E2231; /* deepest plum for text on cream */
  --vila-plum-600:    #6B5269;
  --vila-plum-400:    #8F7A8D;
  --vila-plum-200:    #C9BEC8;
  --vila-plum-100:    #E7E0E6;
  --vila-plum-50:     #F4EFF3;

  --vila-cream:       #FEFAF4; /* primary surface — "warm off-white" */
  --vila-cream-2:     #F7F1E7; /* card-alt / section fill */
  --vila-cream-3:     #EFE7D8; /* divider / quiet surface */

  --vila-ink:         #1A1614; /* body text */
  --vila-ink-2:       #5A5049; /* secondary text */
  --vila-ink-3:       #8A8078; /* muted / hint */
  --vila-ink-4:       #B8AFA6; /* placeholder / disabled */

  /* ─── Contextual accents (day/night modes, activity colors)
     Carried in from the product. Used for small semantic
     moments — never as headline color. */
  --vila-day:         #3D8A70; /* day-mode accent (calm green) */
  --vila-day-2:       #6DAF8E;
  --vila-night:       #9B8DC4; /* night-mode accent (soft purple) */
  --vila-night-2:     #B8ACD8;

  --vila-feeding:     #3D8A70; /* green — feeding/bottle */
  --vila-feeding-2:   #6DAF8E;
  --vila-diaper:      #D9A14A; /* amber — diaper */
  --vila-diaper-2:    #E5B972;
  --vila-medication:  #D16B68; /* red — medication */
  --vila-medication-2:#E48E8B;
  --vila-pumping:     #5B8DC8; /* blue — pumping */
  --vila-pumping-2:   #8BB2E0;
  --vila-growth:      #C69C6D; /* tan — growth/measurement */
  --vila-growth-2:    #DBB995;
  --vila-sleep:       var(--vila-night);   /* purple — sleep alias */
  --vila-nap:         var(--vila-night);   /* purple — naps */
  --vila-wake:        var(--vila-night);   /* purple — wake events */

  /* ─── Semantic surface tokens ─────────────────────────── */
  --bg:               var(--vila-cream);
  --bg-alt:           var(--vila-cream-2);
  --surface:          #FFFFFF;
  --surface-alt:      var(--vila-cream-2);
  --border:           rgba(80, 59, 78, 0.10);
  --border-strong:    rgba(80, 59, 78, 0.18);

  --fg-1:             var(--vila-ink);
  --fg-2:             var(--vila-ink-2);
  --fg-3:             var(--vila-ink-3);
  --fg-4:             var(--vila-ink-4);
  --on-plum:          var(--vila-cream);

  /* ─── Dark mode surfaces ──────────────────────────────── */
  --dark-bg:          #0E0C0E; /* deepest surface */
  --dark-bg-2:        #171517; /* card surface on dark */
  --dark-bg-3:        #201D20; /* raised card / sheet */
  --dark-border:      rgba(254, 250, 244, 0.08);
  --dark-border-str:  rgba(254, 250, 244, 0.14);
  --dark-fg-1:        rgba(254, 250, 244, 0.94); /* body text on dark */
  --dark-fg-2:        rgba(254, 250, 244, 0.65);
  --dark-fg-3:        rgba(254, 250, 244, 0.42);

  /* Icon color on dark tile backgrounds — each category pairs
     a tinted tile (6–10% alpha) with a saturated glyph. Use
     --vila-{cat}-glow for glyph, --vila-{cat}-tile for bg. */
  --vila-sleep-tile:      rgba(155, 141, 196, 0.14);
  --vila-sleep-glow:      #B5A8E0;
  --vila-feeding-tile:    rgba(61, 138, 112, 0.18);
  --vila-feeding-glow:    #7BC9A4;
  --vila-diaper-tile:     rgba(217, 161, 74, 0.14);
  --vila-diaper-glow:     #F0C078;
  --vila-medication-tile: rgba(209, 107, 104, 0.14);
  --vila-medication-glow: #F09290;
  --vila-pumping-tile:    rgba(91, 141, 200, 0.14);
  --vila-pumping-glow:    #8BB2E0;
  --vila-growth-tile:     rgba(198, 156, 109, 0.14);
  --vila-growth-glow:     #E0B790;
  --vila-wake-tile:       rgba(155, 141, 196, 0.14);
  --vila-wake-glow:       #B5A8E0;

  /* ─── Elevation ──────────────────────────────────────── */
  --shadow-xs:        0 1px 2px rgba(46, 34, 49, 0.04);
  --shadow-sm:        0 1px 4px rgba(46, 34, 49, 0.06);
  --shadow-md:        0 4px 14px rgba(46, 34, 49, 0.08);
  --shadow-lg:        0 10px 32px rgba(46, 34, 49, 0.12);

  /* ─── Radius ─────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* default button radius (from constants/ui.ts) */
  --r-lg: 20px;   /* cards */
  --r-xl: 28px;   /* sheets / hero */
  --r-full: 999px;

  /* ─── Spacing scale (4pt) ────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;   /* SCREEN_PADDING_H */
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ─── Type ───────────────────────────────────────────── */
  --font-display: "Outfit", ui-sans-serif, sans-serif; /* titles, headlines, big numbers */
  --font-sans:    "Inter", "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Source Serif 4", ui-serif, Georgia, serif; /* marketing only */
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — display sizes use Outfit; body/UI sizes use Inter */
  --t-display:    56px / 1.05 var(--font-display); /* marketing hero */
  --t-h1:         36px / 1.15 var(--font-display);
  --t-h2:         28px / 1.2  var(--font-display);
  --t-h3:         22px / 1.3  var(--font-display);
  --t-h4:         18px / 1.35 var(--font-sans);
  --t-body:       16px / 1.55 var(--font-sans);
  --t-body-sm:    14px / 1.5  var(--font-sans);
  --t-caption:    12px / 1.4  var(--font-sans);
  --t-micro:      11px / 1.3  var(--font-sans);

  /* Interaction */
  --press-opacity: 0.75;   /* ACTIVE_OPACITY */
  --press-subtle:  0.85;   /* ACTIVE_OPACITY_SUBTLE */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      160ms;
  --dur:           240ms;
  --dur-slow:      600ms;
}

/* ─── Semantic element defaults ────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font: var(--t-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1);  font-weight: 700; color: var(--vila-plum-ink); letter-spacing: -0.015em; }
h2 { font: var(--t-h2);  font-weight: 700; color: var(--vila-plum-ink); letter-spacing: -0.01em;  }
h3 { font: var(--t-h3);  font-weight: 600; color: var(--vila-plum-ink); letter-spacing: -0.005em; }
h4 { font: var(--t-h4);  font-weight: 600; color: var(--fg-1); }
p  { font: var(--t-body); color: var(--fg-1); text-wrap: pretty; }
small, .caption { font: var(--t-caption); color: var(--fg-3); }
code, .mono { font: var(--t-body-sm); font-family: var(--font-mono); }

.eyebrow {
  font: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vila-plum-400);
}

/* Utility: hairline divider using the border token */
.hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }