/* =========================================================================
   Peach Design System — Foundations
   PCOS-focused women's health app. Warm peach + cream + leaf-green palette
   derived from the Peach mascot. Newsreader (display, often italic) +
   DM Sans (UI). Lifted 1:1 from packages/mobile/src/theme/tokens.ts +
   src/components/ui/Text.tsx in the production iOS app.
   ========================================================================= */

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

:root {
  /* ── BRAND PALETTE — LIGHT (default) ──────────────────────────────────── */
  --bg:              #FFF6F1;   /* warm cream — page background */
  --bg-2:            #FAE8DC;   /* deeper cream — tinted sections, chips */
  --surface:         #FFFFFF;   /* cards, sheets */
  --ink:             #5A3530;   /* warm brown — headings + body */
  --ink-2:           #7A4F47;   /* secondary text */
  --ink-3:           #A1857B;   /* tertiary / placeholder */
  --line:            #F2D9CC;   /* subtle borders, dividers */

  --primary:         #F4A0A0;   /* peach coral — mascot body, primary CTAs */
  --primary-deep:    #E27870;   /* pressed / active */
  --accent:          #6FAB7E;   /* leaf green — mascot leaf, success */
  --accent-2:        #FFC7B8;   /* soft peach blush — fills, chip backgrounds */

  --good:            #6FAB7E;   /* same as accent */
  --warn:            #E89A53;   /* warm amber */
  --danger:          #C7655B;   /* deep coral — derived from mascot shadow */

  /* Cycle phase colors — used in calendar, week strip, phase chips */
  --cycle-period:    #F4A0A0;   /* menstrual */
  --cycle-fertile:   #FFC7B8;   /* fertile window */
  --cycle-ovul:      #6FAB7E;   /* ovulation */

  /* Shadows + gradient stops */
  --shadow-color:    rgba(90, 53, 48, 0.10);   /* warm brown card shadow */
  --warm-grad-top:   #FFE5D5;                  /* top stop of the Home hero wash */
  --insight-grad-from: #5A3530;                /* warm brown */
  --insight-grad-to:   #C7655B;                /* deep coral */

  /* Mood slider — 5-stop gradient (low → great) */
  --mood-1: #C7655B;
  --mood-2: #E89A53;
  --mood-3: #FCA090;
  --mood-4: #A4C58F;
  --mood-5: #6FAB7E;

  /* ── TYPE STACKS ──────────────────────────────────────────────────────── */
  --font-display: 'Newsreader', 'Newsreader Local', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type sizes — from sizes in tokens.ts */
  --size-title-xl:    44px;
  --size-title-l:     32px;
  --size-title-m:     24px;
  --size-title-s:     19px;
  --size-body:        15px;
  --size-body-small:  13px;
  --size-caption:     12px;
  --size-eyebrow:     11px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   26px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* ── SPACING SCALE ────────────────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  14px;
  --space-lg:  18px;
  --space-xl:  22px;
  --space-xxl: 30px;

  /* ── ELEVATION ────────────────────────────────────────────────────────── */
  --shadow-card:    0 4px 12px var(--shadow-color);
  --shadow-pill:    0 4px 12px rgba(0, 0, 0, 0.15);          /* white CTAs over cream */
  --shadow-avatar:  0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 12px 32px rgba(90, 53, 48, 0.22);      /* modals, sheets */

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* gentle, soft landings */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* slight overshoot for celebratory beats */
  --dur-quick:   140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ── DARK THEME ────────────────────────────────────────────────────────────
   Built from the same character — brighter peach + green that hold contrast
   on deep warm-brown backgrounds. Mirrored from darkTokens in tokens.ts. */
:root[data-theme='dark'],
[data-theme='dark'] {
  --bg:              #1F1411;
  --bg-2:            #2A1C18;
  --surface:         #33231F;
  --ink:             #FFF6F1;
  --ink-2:           #E5D2C8;
  --ink-3:           #A89084;
  --line:            #3F2C26;

  --primary:         #FFB8A8;
  --primary-deep:    #F4A0A0;
  --accent:          #88C499;
  --accent-2:        #5A3A33;

  --good:            #88C499;
  --warn:            #F0AB6B;
  --danger:          #E08577;

  --cycle-period:    #FFB8A8;
  --cycle-fertile:   #F4A0A0;
  --cycle-ovul:      #88C499;

  --shadow-color:    rgba(0, 0, 0, 0.55);
  --warm-grad-top:   #3A2520;
  --insight-grad-from: #0F0805;
  --insight-grad-to:   #3A2520;
}

/* ── SEMANTIC TYPE ROLES ────────────────────────────────────────────────────
   Headlines (h1/h2/h3) use Newsreader — often italic in the product. Body
   uses DM Sans. Eyebrow is the all-caps tracked label used above hero copy.
   Selectors mirror what the React Native Text component produces. */
body,
.peach-root {
  font-family: var(--font-body);
  font-size:   var(--size-body);
  line-height: 1.45;
  color:       var(--ink);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .pds-title-xl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:   var(--size-title-xl);
  line-height: 0.95;
  letter-spacing: -1px;
  color:       var(--ink);
  margin: 0;
}

h2, .pds-title-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:   var(--size-title-l);
  line-height: 1;
  letter-spacing: -0.6px;
  color:       var(--ink);
  margin: 0;
}

h3, .pds-title-m {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:   var(--size-title-m);
  line-height: 1.1;
  letter-spacing: -0.4px;
  color:       var(--ink);
  margin: 0;
}

h4, .pds-title-s {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:   var(--size-title-s);
  line-height: 1.15;
  letter-spacing: -0.2px;
  color:       var(--ink);
  margin: 0;
}

/* Hero pattern used throughout the app: italic Newsreader display for the
   single biggest beat on a screen (e.g. "Period in 4 days"). */
.pds-hero {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 500;
  font-size:   48px;
  line-height: 52px;
  letter-spacing: -1px;
  color:       var(--ink);
}

.pds-body  { font-family: var(--font-body); font-size: var(--size-body);       line-height: 1.45; color: var(--ink);   }
.pds-body-s{ font-family: var(--font-body); font-size: var(--size-body-small); line-height: 1.4;  color: var(--ink-2); }
.pds-caption { font-family: var(--font-body); font-size: var(--size-caption); line-height: 1.4; color: var(--ink-3); }

/* Eyebrow — all-caps semibold, tracked. Used above every hero block. */
.pds-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size:   var(--size-eyebrow);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color:       var(--ink-3);
}

/* Numbers — tabular for tracker stats / cycle days */
.pds-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.pds-bg-warm-wash {
  /* The Home hero wash: warm peach into cream over the top 480px. Mirrors
     LinearGradient with locations [0, 0.45] in HomeScreen.tsx. */
  background: linear-gradient(to bottom, var(--warm-grad-top) 0%, var(--bg) 45%);
}

.pds-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.pds-pill {
  border-radius: var(--radius-pill);
  padding: 12px 32px;
}