/* =============================================================
   24/7 Teach — Colors & Type
   Single source of truth for design tokens.
   Import this in every HTML file: <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================= */

/* ---- Fonts ----
   Display: Fraunces (variable: opsz, wght, SOFT, WONK, ital).
            Bundled locally — see fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf
   Body:    Inter (variable wght 400–700). Loaded from Google Fonts.
   24/7 Teach defaults to SOFT 0 (enterprise / crisp). */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* =========================================================
     COLOR — Primitives
     Top 4 brand colors (from the brief):
       #e6ecf0  off-white / page background
       #07c4c8  teal blue (primary accent)
       #f59070  warm coral / orange (sparing emphasis)
       #30455c  darker blue (primary text & hero anchor)
     Plus supporting neutrals and darker-background variants.
     ========================================================= */

  /* Primary navy family */
  --navy-900: #10243E;     /* Deep navy — hero backgrounds, footer */
  --navy-700: #30455c;     /* Darker blue — body headers, primary text on light */
  --navy-500: #63697a;     /* Darker gray-blue — secondary text on light bg */
  --navy-300: #a7b1c2;     /* Lighter gray-blue — on dark backgrounds */

  /* Teal family */
  --teal-600: #2D8990;     /* Darker teal — links/accents on LIGHT backgrounds */
  --teal-500: #07c4c8;     /* Teal blue — accents/icons on DARK backgrounds */
  --teal-100: #d6f3f4;     /* Pale teal — subtle fills, tag backgrounds */

  /* Coral / orange family */
  --coral-700: #a85636;    /* Deepest coral — high-contrast emphasis on LIGHT */
  --coral-600: #cc745a;    /* Darker coral — emphasis on LIGHT backgrounds */
  --coral-500: #E8886A;    /* Muted coral — callouts (Learn/Do/Be) */
  --coral-400: #f59070;    /* Warm orange — accents on DARK backgrounds */
  --coral-100: #fce4db;    /* Pale coral — tag backgrounds, soft fills */

  /* Warm gold (tertiary accent) — REPLACED with coral per brand guide */
  --gold-500:  #f59070;    /* Coral (formerly gold) — decorative rules, medals/proof */

  /* Neutrals */
  --off-white: #F8F6F2;    /* Warm off-white — alt page bg */
  --bg-cool:   #e6ecf0;    /* Top-4 cool off-white — default page bg */
  --bg-soft:   #eaf0f3;    /* Slightly cooler — section alternation */
  --gray-200:  #E8E5DE;    /* Soft gray — borders, dividers */
  --gray-400:  #cbd2d9;    /* Mid gray — subtle borders */
  --charcoal:  #2A2A2A;    /* Charcoal — body text alternative */
  --white:     #ffffff;

  /* =========================================================
     COLOR — Semantic roles
     Use these in components so dark/light mode can swap later.
     ========================================================= */
  --color-bg:          var(--bg-cool);
  --color-bg-alt:      var(--white);
  --color-surface:     var(--white);
  --color-surface-alt: var(--off-white);
  --color-ink:         var(--navy-700);       /* primary text */
  --color-ink-muted:   var(--navy-500);       /* secondary text */
  --color-ink-soft:    #8a92a1;               /* tertiary / meta */
  --color-border:      var(--gray-200);
  --color-border-strong: var(--gray-400);
  --color-accent:      var(--teal-600);       /* links, icons on light */
  --color-accent-hover:#226c71;
  --color-emphasis:    var(--coral-600);      /* highlight moments */
  --color-gold:        var(--gold-500);

  /* On-dark (navy) surfaces */
  --color-on-dark-ink:       #f3f5f8;
  --color-on-dark-ink-muted: var(--navy-300);
  --color-on-dark-accent:    var(--teal-500);
  --color-on-dark-emphasis:  var(--coral-400);

  /* =========================================================
     TYPE — Families (shared with Naomi-AI)
     ========================================================= */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* SOFT axis — 24/7 Teach defaults to enterprise (crisp, professional).
     Student/educator tiers exist for sibling Naomi-AI surfaces. */
  --fraunces-soft: 0;

  /* =========================================================
     TYPE — Scale (Naomi-AI shared, 1.25 ratio, 16px base)
     ========================================================= */
  --fs-display-hero: 3rem;       /* 48px */
  --fs-display-1:    2.25rem;    /* 36px */
  --fs-display-2:    1.75rem;    /* 28px */
  --fs-h1:           1.5rem;     /* 24px — Fraunces */
  --fs-h2:           1.25rem;    /* 20px — Fraunces */
  --fs-h3:           1.125rem;   /* 18px — Inter (switch!) */
  --fs-h4:           1rem;       /* 16px — Inter */
  --fs-body-lg:      1.125rem;   /* 18px — student reading */
  --fs-body:         1rem;       /* 16px — default */
  --fs-body-sm:      0.875rem;   /* 14px — dense UI */
  --fs-caption:      0.8125rem;  /* 13px */
  --fs-micro:        0.6875rem;  /* 11px */

  /* Legacy aliases kept so earlier preview cards + UI kit stay compatible */
  --fs-lede:   var(--fs-body-lg);
  --fs-small:  var(--fs-body-sm);

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.4;
  --lh-loose:   1.5;
  --lh-reading: 1.6;

  --tracking-eyebrow: 0.05em;
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* =========================================================
     SPACING — 4px base scale
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Container widths */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1320px;

  /* =========================================================
     RADII / SHADOWS / MOTION
     ========================================================= */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;       /* cards */
  --radius-xl: 22px;       /* feature cards */
  --radius-pill: 999px;    /* buttons */

  --shadow-xs: 0 1px 2px rgba(16, 36, 62, 0.05);
  --shadow-sm: 0 2px 6px rgba(16, 36, 62, 0.06), 0 1px 2px rgba(16,36,62,0.04);
  --shadow-md: 0 10px 24px -8px rgba(16, 36, 62, 0.14), 0 2px 6px rgba(16,36,62,0.06);
  --shadow-lg: 0 24px 48px -16px rgba(16, 36, 62, 0.22), 0 4px 12px rgba(16,36,62,0.08);
  --shadow-focus: 0 0 0 3px rgba(7, 196, 200, 0.35);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   Opt in by using these classes / elements.
   ========================================================= */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fraunces via variation settings — all display/heading uses Fraunces 600
   with SOFT axis driven by --fraunces-soft. */
.font-display, .display-hero, .display-1, .display-2, .h1, .h2, h1, h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'SOFT' var(--fraunces-soft), 'opsz' 48;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.font-body { font-family: var(--font-body); }

/* Surface tier modifiers — shared with Naomi-AI */
.surface-student    { --fraunces-soft: 100; }
.surface-educator   { --fraunces-soft: 50; }
.surface-enterprise { --fraunces-soft: 0; }

.display-hero { font-size: clamp(2rem, 5vw, var(--fs-display-hero)); line-height: var(--lh-tight); }
.display-1    { font-size: clamp(1.75rem, 4vw, var(--fs-display-1));   line-height: var(--lh-tight); }
.display-2    { font-size: clamp(1.5rem, 3.5vw, var(--fs-display-2));  line-height: var(--lh-tight); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: 0; }
.h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: 0; }

/* Tabular nums for any numeric display */
.nums {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-tight);
}

.lede   { font-size: var(--fs-lede); line-height: var(--lh-normal); color: var(--color-ink-muted); }
.body   { font-size: var(--fs-body); line-height: var(--lh-loose); }
.small  { font-size: var(--fs-small); }
.micro  { font-size: var(--fs-micro); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Links */
a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Element-level defaults */
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--color-ink); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--color-ink); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-ink); margin: 0; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--color-ink); margin: 0; }
p  { margin: 0 0 1em; }

/* Dark-section helper: opt in by adding .on-dark to any container */
.on-dark {
  background: var(--navy-900);
  color: var(--color-on-dark-ink);
}
.on-dark a      { color: var(--color-on-dark-accent); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--color-on-dark-ink); }
.on-dark .lede  { color: var(--color-on-dark-ink-muted); }
.on-dark .eyebrow { color: var(--color-on-dark-accent); }