/* ═══════════════════════════════════════════════════════════════════
   DaySteps — Colors & Type
   Canonical tokens derived from:
     - DaySteps/DESIGN.md (Three-Tier Design Model)
     - CalmColors.swift + CalmTypography (iOS app source)
     - daysteps_deploy/shared.css (marketing site)
   Calm is the product. When in doubt: calm > clever.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────── */
@font-face { font-family: 'Lexend'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('fonts/Lexend-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lexend'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/Lexend-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lexend'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/Lexend-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Lexend'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/Lexend-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Lexend'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/Lexend-Bold.ttf') format('truetype'); }

:root {
  /* ── Brand Palette (canonical from Brandbook SVGs) ─────────────── */
  --daybreak-gold:   #E4B061;  /* sun in logo. Decorative only — fails text contrast on cream (1.79:1) */
  --dusk-gold:       #D2A66D;
  --gold-pale:       rgba(228, 176, 97, 0.10);
  --gold-ui:         #A8792A;  /* gold button hover */
  --gold-ui-hover:   #956822;
  --nocturne-blue:   #1A3154;  /* Deep navy — brand dark, widgets, elevated dark surfaces */
  --twilight-blue:   #40577C;
  --horizon-blue:    #6A8EAB;
  --horizon-blue-strong: #4D6B87; /* paired with cream text (5.07:1 AA) */
  --primary-teal:    #507B88;  /* upper step / secondary accent */
  --steel-blue:      #5F778D;  /* lower steps / "Steps" wordmark */
  --cyan-blue:       #5F91A1;  /* middle steps */
  --mist-grey:       #A0A9B0;
  --cream-linen:     #F8F4EA;  /* splash/onboarding only — NOT app chrome */
  --cool-grey-50:    #EEF0F5;  /* light-mode page background (in-app) */
  --cool-grey-100:   #E4E7EE;  /* grouped sheet background */

  /* ── Text-safe gold variants ──────────────────────────────────── */
  /* Primary CTA fill uses --gold-button with NAVY text (--fg-primary):
     ~6.3:1 contrast, AA normal. Text-only gold links use --gold-text. */
  --gold-text:       #88693A;  /* ≥4.5:1 on light surfaces — AA normal text */
  --gold-button:     #E4B061;  /* = --daybreak-gold, for navy-text fills */
  --gold-button-pressed: #C99A4F;
  --gold-button-outline: #B68C4D;  /* outline/border variant */

  /* ── Semantic Foreground / Background — Light Mode ────────────── */
  /* App chrome is cool-grey with pure-white cards.
     Cream (--cream-linen) is reserved for splash/onboarding and marketing. */
  --bg-page:         var(--cool-grey-50);  /* #EEF0F5 */
  --bg-surface:      #FFFFFF;              /* cards */
  --bg-surface-elevated: #FFFFFF;          /* sheets, modals */
  --bg-secondary:    var(--cool-grey-100); /* grouped areas inside sheets */
  --bg-splash:       var(--cream-linen);   /* splash, onboarding, marketing only */
  --bg-navy:         var(--nocturne-blue); /* contrast sections */
  --bg-navy-mid:     #243C5E;

  --fg-primary:      #2C3E50;  /* body text */
  --fg-secondary:    #556B7A;  /* muted text */
  --fg-tertiary:     #7A8A96;  /* captions, timestamps */
  --fg-on-dark:      var(--cream-linen);
  --fg-on-dark-secondary: #C8C0B0;
  --fg-on-dark-tertiary:  #9EA8B4;

  --border-subtle:   rgba(44, 62, 80, 0.08);
  --border-default:  rgba(44, 62, 80, 0.12);
  --border-on-dark:  rgba(255, 255, 255, 0.12);

  /* ── Accents & roles ─────────────────────────────────────────── */
  --accent:          var(--daybreak-gold);        /* decorative */
  --accent-text:     var(--gold-text);            /* text-safe */
  --accent-button:   var(--gold-button);          /* button fill (white text) */
  --accent-hover:    var(--gold-button-pressed);
  --accent-blue:     var(--primary-teal);         /* timers, progress, interactive */
  --accent-blue-bright: #6C909B;                  /* dark-mode progress ring */
  --accent-green:    #6FAE7C;                     /* completion / success */
  --accent-purple:   #9680C4;                     /* supplementary */

  /* Destructive — adult screens only */
  --destructive-red: #B6483E;

  /* ── Personas — avatar / account color roles ─────────────────── */
  /* Parent (primary adult): Nocturne navy. Clinician (Care Team): coral-red.
     Family members draw from a fixed 6-color rotation below, assigned by
     join-order so each person is visually distinct on shared calendars. */
  --persona-parent:    var(--nocturne-blue);  /* TP avatar */
  --persona-clinician: #D64A4A;               /* DT avatar, Care Team role */

  --family-1-teal:     #3FB3A6;  /* Aria */
  --family-2-blue:     #2E9DE8;  /* Ben / Emery */
  --family-3-purple:   #5E49C2;  /* Casey */
  --family-4-orange:   #E87A2E;  /* Devon */
  --family-5-green:    #4AA663;  /* Drew */
  --family-6-rose:     #D05A7A;  /* 6th+ rotation */

  /* ── Soft Tints — 7-color task-card rotation (Tier 1 OK) ─────── */
  --soft-blue:       #CCE0EA;
  --soft-green:      #D0E6D4;
  --soft-peach:      #F2D9C0;
  --soft-lavender:   #DFD7EC;
  --soft-yellow:     #F4E4B8;
  --soft-teal:       #CCE0DC;
  --soft-rose:       #ECD4D4;

  /* ── Mood Tracker (clinical exception — self-reported, muted) ── */
  --mood-low:        #C7554D;
  --mood-mid:        #E3C76B;
  --mood-high:       #73BF80;
  --focus-break:     #6BB8AD;

  /* ── Timer / warning (never pure red in child UI) ────────────── */
  --timer-warning-amber: #E8A34E;

  /* ── Layout ──────────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;    /* buttons */
  --r-lg: 16px;    /* parent cards */
  --r-xl: 20px;
  --r-2xl: 24px;   /* child cards, sheets, modals */
  --r-pill: 9999px;

  /* ── Spacing (8pt grid — CalmSpacing) ────────────────────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-smd: 12px;
  --sp-md:  16px;
  --sp-mlg: 20px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-sm: 0 2px 4px rgba(44, 62, 80, 0.04);
  --shadow-card: 0 2px 8px rgba(44, 62, 80, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(44, 62, 80, 0.08);
  --shadow-lg: 0 24px 64px rgba(44, 62, 80, 0.18);

  /* ── Type ────────────────────────────────────────────────────── */
  --font:  'Lexend', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Lexend ships with generous letter-spacing by default — do NOT tighten */
}

/* ── Dark Mode (iOS app default / opt-in for web) ───────────────── */
.theme-dark, [data-theme="dark"] {
  --bg-page:            #0F1A2B;  /* backgroundPrimary (dark) */
  --bg-surface:         #182336;  /* cardSurface (dark) */
  --bg-surface-elevated: var(--nocturne-blue);  /* #1A3154 */
  --bg-secondary:       #101C2F;
  --bg-navy:            var(--nocturne-blue);

  --fg-primary:         #F1ECE0;
  --fg-secondary:       #B8C3D0;
  --fg-tertiary:        #8B97A6;

  --border-subtle:      rgba(255, 255, 255, 0.06);
  --border-default:     rgba(255, 255, 255, 0.12);

  --accent-text:        var(--daybreak-gold);  /* gold legible on dark */
  --accent-blue:        var(--accent-blue-bright);
}

/* ─────────────────────────────────────────────────────────────────
   Semantic Typography classes
   Naming mirrors iOS: child* (Tier 1), parent* (Tier 2 & 3)
   Same Lexend scale across all tiers.
   ───────────────────────────────────────────────────────────────── */
.type-display {
  font: var(--fw-bold) 34px/1.15 var(--font);
  letter-spacing: -0.005em;
}
.type-title-1, h1.type, .child-title-1, .parent-title-1 {
  font: var(--fw-semibold) 28px/1.2 var(--font);
}
.type-title-2, h2.type, .child-title-2, .parent-title-2 {
  font: var(--fw-semibold) 22px/1.25 var(--font);
}
.type-title-3, h3.type, .child-title-3, .parent-title-3 {
  font: var(--fw-medium) 20px/1.3 var(--font);
}
.type-headline, .child-headline, .parent-headline {
  font: var(--fw-semibold) 17px/1.4 var(--font);
}
.type-body, .child-body, .parent-body {
  font: var(--fw-regular) 17px/1.55 var(--font);
}
.type-callout {
  font: var(--fw-regular) 16px/1.55 var(--font);
}
.type-subheadline {
  font: var(--fw-regular) 15px/1.5 var(--font);
}
.type-footnote {
  font: var(--fw-light) 13px/1.5 var(--font);
  color: var(--fg-tertiary);
}
.type-caption {
  font: var(--fw-regular) 12px/1.4 var(--font);
  color: var(--fg-tertiary);
}

/* Marketing-site eyebrow label (from shared.css) */
.type-label {
  font: var(--fw-semibold) 11px/1.2 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Global resets for card-preview use */
html, body {
  font-family: var(--font);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}