/* =========================================================================
   Muna Health — Design Tokens
   Warm, earthy, grounded. Built from amber #D97706, stone #57534E, terracotta #C2410C.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Display: Newsreader — warm, editorial serif with high humanism. Use for marquee
   numbers (the OS-HRS score), value-prop headlines, and the brand wordmark.
   Body:    DM Sans — the canonical UI sans. Neutral and credible (not consumer-
            cheerful), it pairs cleanly with Newsreader and holds the calm,
            trustworthy tone the system is built on. Use for everything else.

   Both are pulled from Google Fonts. Drop production .woff2 files in fonts/ and
   swap these @imports for @font-face rules when licensed faces are available. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* =========================================================================
     COLOR — RAW PALETTE
     Earthy. Warm. Naming follows material metaphors (clay, stone, bone, ember)
     rather than abstract numbers — so semantic choices read in context.
     ========================================================================= */

  /* Amber — primary warm accent. Pulled from #D97706. */
  --amber-50:  #FEF7EC;
  --amber-100: #FCEACB;
  --amber-200: #F8D08C;
  --amber-300: #F2B25A;
  --amber-400: #EA9530;
  --amber-500: #D97706; /* core */
  --amber-600: #B85F04;
  --amber-700: #8F4A05;
  --amber-800: #6B3704;
  --amber-900: #4A2603;

  /* Terracotta — high-energy accent. Pulled from #C2410C. */
  --terracotta-50:  #FDEEE5;
  --terracotta-100: #FAD5BF;
  --terracotta-200: #F2A87A;
  --terracotta-300: #E47B45;
  --terracotta-400: #D1551F;
  --terracotta-500: #C2410C; /* core */
  --terracotta-600: #9E330A;
  --terracotta-700: #7A2708;
  --terracotta-800: #571B06;
  --terracotta-900: #3D1304;

  /* Stone — neutral warm grey. Pulled from #57534E. */
  --stone-50:  #FAF8F5; /* bone — page bg */
  --stone-100: #F1EDE6; /* sand */
  --stone-200: #E2DCD1; /* parchment */
  --stone-300: #C9C1B3; /* dust */
  --stone-400: #A39A8A; /* driftwood */
  --stone-500: #7C7367; /* slate */
  --stone-600: #57534E; /* core — deep stone */
  --stone-700: #3F3C38;
  --stone-800: #2A2826;
  --stone-900: #1A1817;

  /* Sage — for the healthy / 70–100 path. Muted olive-green, not clinical mint. */
  --sage-50:  #F3F5EE;
  --sage-100: #E2E8CF;
  --sage-200: #C5D1A1;
  --sage-300: #A4B574;
  --sage-400: #82984F;
  --sage-500: #647A38; /* core */
  --sage-600: #4D5F2A;
  --sage-700: #3A481F;
  --sage-800: #283217;
  --sage-900: #1A210F;

  /* Clay — for the high-risk / 0–40 path. Deeper, more grounded than terracotta. */
  --clay-50:  #FBECE5;
  --clay-300: #D9755A;
  --clay-500: #A53A1F; /* core */
  --clay-700: #6B240F;
  --clay-900: #391006;

  /* =========================================================================
     COLOR — SEMANTIC
     What you actually reach for in components. Bind these, not the raw scale.
     ========================================================================= */

  /* Surfaces */
  --bg:          var(--stone-50);   /* page background — warm bone */
  --bg-elevated: #FFFFFF;            /* cards on bone */
  --bg-sunken:   var(--stone-100);   /* input fields, sectioned regions */
  --bg-inverse:  var(--stone-800);
  --bg-overlay:  rgba(26, 24, 23, 0.55); /* modal scrim */

  /* Foreground / text */
  --fg-1: var(--stone-800);  /* primary text — near-black with warmth */
  --fg-2: var(--stone-600);  /* secondary text — deep stone */
  --fg-3: var(--stone-500);  /* tertiary / metadata */
  --fg-4: var(--stone-400);  /* disabled / placeholder */
  --fg-inverse: var(--stone-50);
  --fg-on-amber: #FFFFFF;
  --fg-on-terracotta: #FFFFFF;

  /* Borders / dividers */
  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong: var(--stone-500);

  /* Brand */
  --brand-primary: var(--amber-500);
  --brand-primary-hover: var(--amber-600);
  --brand-primary-pressed: var(--amber-700);
  --brand-accent: var(--terracotta-500);
  --brand-deep: var(--stone-600);

  /* =========================================================================
     RISK PATHS — SYSTEM-LEVEL RULE. Do not re-decide per screen.
     -------------------------------------------------------------------------
     The OS-HRS scale is INVERTED: higher = healthier.
        70–100  Healthy   → sage
        41–69   Moderate  → amber
         0–40   High risk → clay
     Every score-display and result component reads from these tokens. The
     tier→colour and tier→gradient mapping below is locked at the system level.
     ========================================================================= */
  --score-healthy-min:  70;  /* 70–100 */
  --score-moderate-min: 41;  /* 41–69  */
  --score-high-min:     0;   /*  0–40  */

  /* Risk path colors — these drive the result screens and dashboards */
  --path-healthy:  var(--sage-500);
  --path-healthy-bg: var(--sage-50);
  --path-healthy-fg: var(--sage-700);

  --path-moderate: var(--amber-500);
  --path-moderate-bg: var(--amber-50);
  --path-moderate-fg: var(--amber-700);

  --path-high:     var(--clay-500);
  --path-high-bg:  var(--clay-50);
  --path-high-fg:  var(--clay-700);

  /* Result-screen HEADER BAND gradients — locked tier→gradient mapping.
     Healthy = sage band · Moderate = amber band · High risk = clay band. */
  --band-healthy:  linear-gradient(160deg, var(--sage-400) 0%, var(--sage-600) 100%);
  --band-moderate: linear-gradient(160deg, var(--amber-400) 0%, var(--amber-600) 100%);
  --band-high:     linear-gradient(160deg, var(--clay-300) 0%, var(--clay-500) 100%);

  /* Status / feedback */
  --success: var(--sage-500);
  --warning: var(--amber-500);
  --danger:  var(--clay-500);
  --info:    var(--stone-600);

  /* Focus ring — visible on warm bg, accessible */
  --focus-ring: 0 0 0 3px rgba(217, 119, 6, 0.32);

  /* =========================================================================
     TYPE — FAMILIES
     ========================================================================= */
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* =========================================================================
     TYPE — SCALE
     Mobile-first. Display sizes use serif; UI uses sans.
     ========================================================================= */
  --type-display-xl: 700 56px/1.02 var(--font-serif); /* score number, hero reveals */
  --type-display-l:  600 40px/1.08 var(--font-serif); /* screen headlines, result titles */
  --type-display-m:  500 32px/1.12 var(--font-serif); /* section openers */
  --type-display-s:  500 26px/1.18 var(--font-serif); /* card heroes */

  --type-h1: 600 22px/1.25 var(--font-sans);
  --type-h2: 600 18px/1.30 var(--font-sans);
  --type-h3: 600 16px/1.35 var(--font-sans);

  --type-body-l: 400 17px/1.50 var(--font-sans);
  --type-body:   400 15px/1.50 var(--font-sans);
  --type-body-s: 400 13px/1.45 var(--font-sans);

  --type-label:    500 13px/1.30 var(--font-sans);
  --type-button:   600 15px/1.20 var(--font-sans);
  --type-caption:  400 12px/1.40 var(--font-sans);
  --type-overline: 600 11px/1.40 var(--font-sans); /* uppercase with letter-spacing */

  /* Tracking helpers */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-loose:  0.10em;

  /* =========================================================================
     SPACING — 4pt base
     ========================================================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  --gutter-screen: 20px; /* the left/right edge inset for mobile screens */
  --gutter-card:   16px; /* default card padding */

  /* =========================================================================
     RADII
     Warm, soft, but not playful — large radii only on capsules.
     ========================================================================= */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  12px; /* default card / input */
  --radius-l:  16px; /* large card / sheet */
  --radius-xl: 24px; /* hero card, result header */
  --radius-pill: 999px;

  /* =========================================================================
     SHADOWS / ELEVATION
     Tinted with stone, not pure black. Warm, very low contrast.
     ========================================================================= */
  --shadow-xs: 0 1px 1px rgba(87, 83, 78, 0.06);
  --shadow-s:  0 1px 2px rgba(87, 83, 78, 0.06), 0 2px 6px rgba(87, 83, 78, 0.06);
  --shadow-m:  0 2px 4px rgba(87, 83, 78, 0.07), 0 8px 20px rgba(87, 83, 78, 0.07);
  --shadow-l:  0 4px 8px rgba(87, 83, 78, 0.08), 0 16px 36px rgba(87, 83, 78, 0.10);
  --shadow-glow-amber: 0 0 0 6px rgba(217, 119, 6, 0.10), 0 8px 24px rgba(217, 119, 6, 0.22);

  /* Inset / sunken */
  --shadow-inset: inset 0 1px 2px rgba(87, 83, 78, 0.08);

  /* =========================================================================
     MOTION
     Calm, never bouncy. Health = trust.
     ========================================================================= */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-reveal: 720ms; /* score reveal, milestone celebrations */

  /* =========================================================================
     LAYOUT
     ========================================================================= */
  --frame-mobile-w: 390px; /* iPhone 14/15 standard */
  --frame-mobile-h: 844px;
  --tab-bar-h: 76px;
  --status-bar-h: 47px;
  --nav-bar-h: 56px;
}

/* =========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Reset-light. Lets components compose without resetting per-call.
   ========================================================================= */
html, body { background: var(--bg); color: var(--fg-1); font: var(--type-body); -webkit-font-smoothing: antialiased; }

h1 { font: var(--type-display-l); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; }
h2 { font: var(--type-display-m); letter-spacing: var(--tracking-snug);  color: var(--fg-1); margin: 0; }
h3 { font: var(--type-h1); color: var(--fg-1); margin: 0; }
h4 { font: var(--type-h2); color: var(--fg-1); margin: 0; }
h5 { font: var(--type-h3); color: var(--fg-1); margin: 0; }
p  { font: var(--type-body); color: var(--fg-1); margin: 0; }
small { font: var(--type-caption); color: var(--fg-3); }
.overline { font: var(--type-overline); letter-spacing: var(--tracking-loose); text-transform: uppercase; color: var(--fg-3); }
.label { font: var(--type-label); color: var(--fg-2); }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }