/* ============================================================
   Fraley Tutors — Design Tokens
   Source of truth for colors, type, spacing, shadows, radii.
   Mirrors fraleytutors.com (website) and console.fraleytutors.com
   (platform). Where the two diverge, marketing site values win
   for new work; platform-specific values are noted.
   ============================================================ */

/* Inter (UI + body) + Newsreader (display headlines). Newsreader has
   optical sizing built in — `opsz` axis 6..72 — so big headlines render
   with the looser display cut and inline use renders with the tighter
   text cut automatically. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');

:root {
  /* ─── Brand palette ────────────────────────────────────────── */
  /* Vibrant teal — single canonical brand colour across marketing AND
     platform (unified 2026-05-20; the platform previously used a slightly
     desaturated #00B3A4). Used for CTAs, links, numeric highlights
     ("50+", "5/5"), step circles, badges. */
  --ft-teal:            #00cec9;
  --ft-teal-hover:      #00b3ae;
  --ft-teal-tint:       rgba(0, 206, 201, 0.10);   /* badges, subject pills, focus rings */
  --ft-teal-line:       rgba(0, 206, 201, 0.20);   /* hairline borders on tinted chips */
  --ft-teal-glow:       rgba(0, 206, 201, 0.30);   /* button hover shadow */

  /* Dark slate — hero, nav, footer, dark sections.
     "Dark deep" sits one notch darker for the nav/footer bar. */
  --ft-slate:           #2d3436;
  --ft-slate-deep:      #1e2526;
  --ft-navy:            #0d1b2a;   /* platform-only hero gradient origin */
  --ft-navy-2:          #162d44;
  --ft-platform-grad:   linear-gradient(160deg, #0d1b2a 0%, #162d44 100%);

  /* Neutrals */
  --ft-bg:              #ffffff;
  --ft-bg-alt:          #f7f9fa;   /* alternating section bg */
  --ft-bg-tinted:       #f5fafa;   /* notes / quoted-text well */
  --ft-border:          #dfe6e9;
  --ft-border-soft:     #f0f0f0;

  /* Text */
  --ft-text:            #2d3436;
  --ft-text-2:          #636e72;
  --ft-text-3:          #888888;
  --ft-text-onDark:     #ecf0f1;
  --ft-text-onDark-2:   rgba(255,255,255,0.70);
  --ft-text-onDark-3:   rgba(255,255,255,0.50);

  /* Semantic */
  --ft-star:            #f4b400;   /* Trustpilot / review stars */
  --ft-success:         #00b894;
  --ft-success-bg:      #e8f5e9;
  --ft-success-fg:      #2e7d32;
  --ft-info-bg:         #e3f2fd;
  --ft-info-fg:         #1565c0;
  --ft-warn-fg:         #e67e22;   /* "due today" copy */
  --ft-error:           #cf1322;
  --ft-error-bg:        #fff1f0;
  --ft-error-border:    #ffa39e;

  /* ─── Type ─────────────────────────────────────────────────── */
  /* Body, UI labels, microcopy — sans, four weights. */
  --ft-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  /* Display headlines only (H1/H2 on marketing, page titles in product).
     Newsreader gives the brand its "contemporary academic" register. */
  --ft-font-display: 'Newsreader', 'Times New Roman', Georgia, serif;
  /* Italic serif is used decoratively for "floating equations" only.
     We deliberately rely on the OS Times rather than a webfont. */
  --ft-font-eq:      'Times New Roman', Georgia, serif;
  /* No mono font is used in the product UI; if needed, fall back to
     the system mono stack. */
  --ft-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                     'Liberation Mono', monospace;

  /* Type scale (rem-based, 16px root) */
  --ft-fs-12: 0.75rem;
  --ft-fs-13: 0.8125rem;
  --ft-fs-14: 0.875rem;
  --ft-fs-15: 0.9375rem;
  --ft-fs-16: 1rem;
  --ft-fs-18: 1.125rem;
  --ft-fs-20: 1.25rem;
  --ft-fs-24: 1.5rem;
  --ft-fs-28: 1.75rem;
  --ft-fs-32: 2rem;
  --ft-fs-40: 2.5rem;
  --ft-fs-48: 3rem;
  --ft-fs-56: 3.5rem;

  /* ─── Space ────────────────────────────────────────────────── */
  --ft-space-xs:  0.5rem;
  --ft-space-sm:  1rem;
  --ft-space-md:  1.5rem;
  --ft-space-lg:  2.5rem;
  --ft-space-xl:  4rem;
  --ft-space-2xl: 6rem;

  /* ─── Layout ───────────────────────────────────────────────── */
  --ft-container:        1120px;
  --ft-container-narrow: 720px;
  --ft-nav-h:            72px;

  /* ─── Radii ────────────────────────────────────────────────── */
  --ft-radius-sm: 6px;
  --ft-radius:    8px;
  --ft-radius-lg: 12px;
  --ft-radius-xl: 15px;   /* portal cards */
  --ft-radius-pill: 50px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --ft-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --ft-shadow:    0 4px 12px rgba(0,0,0,0.10);
  --ft-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --ft-shadow-xl: 0 12px 40px rgba(0,0,0,0.18);
  --ft-shadow-portal: 0 10px 40px rgba(0,0,0,0.10);  /* tall card stack */
  --ft-shadow-teal-hover: 0 4px 12px var(--ft-teal-glow);

  /* ─── Motion ───────────────────────────────────────────────── */
  --ft-transition:    0.2s ease;
  --ft-transition-slow: 0.4s ease;
  /* Hover lift used on most cards / buttons */
  --ft-lift: translateY(-2px);

  /* ─── Decorative ───────────────────────────────────────────── */
  /* Graph-paper grid overlay used on dark hero / CTA / footer. */
  --ft-grid-overlay:
    linear-gradient(rgba(0,206,201,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,206,201,0.04) 1px, transparent 1px);
  --ft-grid-size: 40px 40px;
}

/* ─── Semantic element styles ────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ft-font-sans);
  font-size: var(--ft-fs-16);
  line-height: 1.65;
  color: var(--ft-text);
  background: var(--ft-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headlines use Newsreader. Tighter tracking than sans display:
   serif already feels wider. H3+ stay on Inter — body sizes don't gain
   anything from the serif. */
h1, h2 {
  font-family: var(--ft-font-display);
  font-weight: 600;          /* serifs read heavier; 600 ≈ 700 sans */
  line-height: 1.12;
  color: var(--ft-text);
  letter-spacing: -0.015em;
  font-feature-settings: "ss01", "ss02";  /* opt into Newsreader's looser two-storey g */
}

h3, h4, h5, h6 {
  font-family: var(--ft-font-sans);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ft-text);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--ft-fs-48); letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: var(--ft-fs-32); }
h3 { font-size: var(--ft-fs-20); }
h4 { font-size: var(--ft-fs-16); }

/* Tabular numerals for stats (e.g. "50+", "3,000+", "£56/hr")
   so digit widths align and weights look consistent. */
.tnum, .stat, .trust-number, .reviews-stat-number, .pricing-amount {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

p  { font-size: var(--ft-fs-16); line-height: 1.65; }

code, pre {
  font-family: var(--ft-font-mono);
  font-size: 0.92em;
}

a {
  color: var(--ft-teal-hover);
  text-decoration: none;
  transition: color var(--ft-transition);
}
a:hover { color: var(--ft-teal); }

/* Marketing-site eyebrow label (uppercase + tracking). */
.eyebrow {
  display: inline-block;
  font-size: var(--ft-fs-13);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ft-teal);
}

/* Decorative equation text — only inside dark sections. */
.eq {
  font-family: var(--ft-font-eq);
  font-style: italic;
  color: rgba(0,206,201,0.12);
  user-select: none;
  white-space: nowrap;
}