/* ============================================================
   Today's Fit — Colors & Type
   Foundational design tokens. Import this file, then use the
   CSS variables below. Light-mode locked, warm & editorial.
   Fonts are loaded from Google Fonts (see fonts note in README).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces ---- */
  --bg:          #FAF6EF;  /* warm cream — app canvas */
  --paper:       #FFFBF4;  /* cards, sheets */
  --oat:         #F0E6D6;  /* soft fills, chips, placeholders */
  --line:        #E2D9C8;  /* hairline borders */

  /* ---- Ink (text + dark cards) ---- */
  --ink:         #2A2520;  /* primary text, dark cards */
  --ink-2:       #6E6359;  /* secondary text */
  --ink-3:       #A89E92;  /* tertiary text, placeholders */
  --on-dark:     #FAF6EF;  /* text on ink cards */
  --on-dark-2:   #B7ADA0;  /* secondary text on ink cards */

  /* ---- Accent (terracotta) ---- */
  --accent:      #B8553A;  /* primary actions, serif highlights, prices */
  --accent-deep: #9E4630;  /* pressed accent */
  --accent-soft: #F2D9CE;  /* accent backgrounds, try-on chips */

  /* ---- Status ---- */
  --sage:        #7A8C5C;  /* positive / LIVE badge */
  --sage-soft:   #E6E9DC;  /* positive background */
  --mustard:     #C8A24A;  /* highlight / streak */

  /* ---- Avatar tints (generated, warm taupe family) ---- */
  --avatar-1:    #C9B79E;
  --avatar-2:    #B7A488;
  --avatar-3:    #D2C3AC;

  /* ---- Fonts ---- */
  --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radii ---- */
  --r-chip:      999px;   /* pills, chips, buttons */
  --r-sm:        12px;    /* small fills, inputs */
  --r-md:        16px;    /* list rows, secondary cards */
  --r-lg:        20px;    /* primary cards */
  --r-xl:        24px;    /* hero photo card, dark stat cards */
  --r-sheet:     28px;    /* modal sheet top corners */

  /* ---- Spacing scale (4pt base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(42,37,32,0.04), 0 8px 24px rgba(42,37,32,0.06);
  --shadow-hero:  0 2px 6px rgba(42,37,32,0.08), 0 18px 40px rgba(42,37,32,0.12);
  --shadow-fab:   0 6px 16px rgba(184,85,58,0.40);
  --shadow-chip:  0 1px 2px rgba(42,37,32,0.05);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         200ms;
}

/* ============================================================
   Semantic type styles
   ============================================================ */

/* Big editorial display — pairs sans + serif italic accent.
   Used for screen headers ("Today, you wore"). */
.t-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* The sans-serif lockup variant used on home/closet/you titles */
.t-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Serif italic accent word inside a title (e.g. "wore", "neutral") */
.t-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.t-h1 { font-family: var(--font-sans); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
.t-h2 { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--ink); }

.t-body  { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--ink); }
.t-body-2{ font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.t-label { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); }
.t-small { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--ink-2); }

/* Mono eyebrow — uppercase, tracked. Dates, section labels, stats. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Mono data — big numbers, prices, wear counts */
.t-data {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Pull-quote — serif italic, emotional moments */
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); }