/* =============================================================
   Dr Kristyn Sommer — Foundations: Colour + Type
   Companion to DESIGN_SYSTEM.md (sections 3, 4, 5, 8).
   All colour in OKLCH. All sizes via clamp() where responsive.
   ============================================================= */

/* Webfonts (new wordmark system): Gloock (serif display) + Raleway (variable body).
   Sora + Mulish kept loaded for legacy editorial copy until transition completes. */
@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Raleway:wght@100..900&family=Sora:wght@300;400;500;600;700;800&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

:root {
  /* ---------- Surfaces ---------- */
  --bg:        oklch(98.8% 0.004 95);   /* bone */
  --paper:     oklch(96.4% 0.005 95);   /* warm paper, secondary surface */
  --paper-2:   oklch(97.6% 0.004 95);   /* lightest paper, hover surface */

  /* ---------- Ink ---------- */
  --ink:       oklch(20% 0.012 240);    /* primary text, near-black neutral */
  --ink-soft:  oklch(34% 0.012 240);    /* secondary text */
  --ink-mute:  oklch(50% 0.010 240);    /* tertiary text, captions only */

  /* ---------- Brand colours from new wordmark ---------- */
  --brand-teal:        oklch(50% 0.10 235);  /* #1D6A96 — Kristyn Gloock teal */
  --brand-teal-light:  oklch(70% 0.11 235);  /* #5BA3D1 — dark-mode Kristyn */
  --brand-yellow:      oklch(82% 0.16 88);   /* #FAC226 — vertical rule + dot */
  --brand-charcoal:    oklch(28% 0.005 285); /* #3A3B3C — Sommer + nav links */
  --brand-mid-grey:    oklch(45% 0.005 285); /* #6B6B6B — "Dr" tracked label */
  --brand-soft-grey:   oklch(63% 0.005 95);  /* #9A9A95 — subtitle */

  /* ---------- Accents ---------- */
  --teal:      var(--brand-teal-light);     /* highlight marker, soft block fills */
  --teal-deep: var(--brand-teal);           /* link, italic accent (cool) */
  --amber:     var(--brand-yellow);         /* italic accent (warm), eyebrow text */

  /* ---------- Identity Accents (LOCKED FAMILY: L≈58, C≈0.13, hue rotates) ---------- */
  --scientist:     oklch(58% 0.13 185);  /* warm teal — Developmental Scientist */
  --advocate:      oklch(58% 0.13 60);   /* golden — Autistic Advocate */
  --communicator:  oklch(58% 0.13 240);  /* blue — Science Communicator */
  --leadership:    oklch(58% 0.13 295);  /* purple — Director & Founder */

  /* Default identity (homepage) maps to brand teal */
  --identity-accent:        var(--brand-teal);
  --identity-tint-faint:    color-mix(in oklch, var(--identity-accent) 4%, transparent);
  --identity-tint-soft:     color-mix(in oklch, var(--identity-accent) 7%, transparent);
  --identity-tint-mid:      color-mix(in oklch, var(--identity-accent) 12%, transparent);
  --identity-tint-wash:     color-mix(in oklch, var(--identity-accent) 20%, transparent);
  --identity-deep:          color-mix(in oklch, var(--identity-accent) 80%, var(--ink));

  /* ---------- Structure ---------- */
  --rule:      oklch(86% 0.006 220);    /* hairlines, dividers */
  --rule-soft: oklch(91% 0.005 95);     /* very-faint divider — #E4E4E0 */

  /* ---------- Type families (NEW WORDMARK SYSTEM) ---------- */
  --font-serif:   'Gloock', 'Times New Roman', serif;        /* display serif — "Kristyn" */
  --font-sans:    'Raleway', system-ui, sans-serif;          /* primary sans — body, ui */
  --font-display: var(--font-sans);                           /* alias: display headings */
  --font-body:    var(--font-sans);                           /* alias: body */

  /* ---------- Type scale (semantic) ---------- */
  --display-xl: clamp(40px, 5.4vw, 76px);  /* hero H1 */
  --display-l:  clamp(30px, 3.4vw, 46px);  /* section H2 */
  --display-m:  clamp(28px, 3.2vw, 40px);  /* sub-section H3 */
  --tile-h:     22px;                       /* tile/card titles */
  --wm:         17px;                       /* site wordmark */
  --body-l:     19px;                       /* hero deck */
  --body:       17px;                       /* standard paragraph */
  --body-s:     15px;                       /* tile body / secondary */
  --caption:    14px;                       /* labels, eyebrows, meta */
  --nav-link:   14px;
  --signoff:    17px;                       /* italic quoted phrases */

  /* ---------- Spacing (4-pt rhythm) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- Radii ---------- */
  --r-card-outer: 28px;
  --r-card-inner: 18px;
  --r-pill:       999px;

  /* ---------- Motion ----------
     Curated curves. ease-out for entries/feedback; ease-soft (iOS drawer) for
     spatial morphs; ease-in-out only when something needs to depart and return. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);  /* subtle overshoot — use sparingly */

  /* Duration ramp — keep UI under 300ms */
  --dur-1: 120ms;   /* button feedback */
  --dur-2: 180ms;   /* hover, color, simple transforms */
  --dur-3: 240ms;   /* nav, dropdowns */
  --dur-4: 320ms;   /* card lifts, larger transforms */
  --dur-5: 480ms;   /* reveals */

  /* ---------- Layout ---------- */
  --container: 1480px;
  --section-py: clamp(72px, 9vw, 144px);
  --section-px: clamp(28px, 5vw, 80px);
}

/* ---------- Identity theme sets ----------
   <body data-identity="scientist"> swaps the entire accent ramp.
   Default (no attribute) inherits the homepage brand teal. */
[data-identity="scientist"] {
  --identity-accent:    var(--scientist);
  --identity-tint-faint: color-mix(in oklch, var(--scientist) 4%, transparent);
  --identity-tint-soft:  color-mix(in oklch, var(--scientist) 7%, transparent);
  --identity-tint-mid:   color-mix(in oklch, var(--scientist) 12%, transparent);
  --identity-tint-wash:  color-mix(in oklch, var(--scientist) 20%, transparent);
  --identity-deep:       color-mix(in oklch, var(--scientist) 80%, var(--ink));
}
[data-identity="advocate"] {
  --identity-accent:    var(--advocate);
  --identity-tint-faint: color-mix(in oklch, var(--advocate) 4%, transparent);
  --identity-tint-soft:  color-mix(in oklch, var(--advocate) 7%, transparent);
  --identity-tint-mid:   color-mix(in oklch, var(--advocate) 12%, transparent);
  --identity-tint-wash:  color-mix(in oklch, var(--advocate) 20%, transparent);
  --identity-deep:       color-mix(in oklch, var(--advocate) 80%, var(--ink));
}
[data-identity="communicator"] {
  --identity-accent:    var(--communicator);
  --identity-tint-faint: color-mix(in oklch, var(--communicator) 4%, transparent);
  --identity-tint-soft:  color-mix(in oklch, var(--communicator) 7%, transparent);
  --identity-tint-mid:   color-mix(in oklch, var(--communicator) 12%, transparent);
  --identity-tint-wash:  color-mix(in oklch, var(--communicator) 20%, transparent);
  --identity-deep:       color-mix(in oklch, var(--communicator) 80%, var(--ink));
}
[data-identity="leadership"] {
  --identity-accent:    var(--leadership);
  --identity-tint-faint: color-mix(in oklch, var(--leadership) 4%, transparent);
  --identity-tint-soft:  color-mix(in oklch, var(--leadership) 7%, transparent);
  --identity-tint-mid:   color-mix(in oklch, var(--leadership) 12%, transparent);
  --identity-tint-wash:  color-mix(in oklch, var(--leadership) 20%, transparent);
  --identity-deep:       color-mix(in oklch, var(--leadership) 80%, var(--ink));
}

/* ---------- Element-level semantic styles ----------
   Mirrors the type scale in DESIGN_SYSTEM.md §4. */
html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-variation-settings: "wght" 350;
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-variation-settings: "wght" 250;
  color: var(--brand-charcoal);
  font-weight: 250;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;             /* prevents single-word orphans on wide displays */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
h1 { font-size: var(--display-xl); line-height: 1.02; max-width: 18ch; letter-spacing: -0.022em; }
h2 { font-size: var(--display-l);  line-height: 1.06; letter-spacing: -0.020em; }
h3 { font-size: var(--display-m);  line-height: 1.08; letter-spacing: -0.016em; }
h4 { font-size: var(--tile-h);     line-height: 1.18; letter-spacing: -0.012em; }

p  { max-width: 65ch; margin: 0 0 var(--s-4); text-wrap: pretty; }

a  {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--teal-deep) 45%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-out),
              text-decoration-color var(--dur-2) var(--ease-out),
              text-decoration-thickness var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--teal-deep);
  }
}

/* Tracked uppercase eyebrow / label — universal label style */
.eyebrow {
  font-family: var(--font-sans);
  font-variation-settings: "wght" 600;
  font-weight: 600;
  font-size: var(--caption);
  color: var(--brand-mid-grey);
  letter-spacing: 0.40em;
  text-transform: uppercase;
}
.eyebrow--cool { color: var(--brand-teal); }
.eyebrow--mute { color: var(--ink-mute); }

/* Highlight marker — teal stripe under the lower 40% of text */
.mark {
  background: linear-gradient(transparent 60%, var(--brand-teal-light) 60%);
  padding: 0 0.05em;
}

/* In-headline accent — Gloock serif, identity-accent colour */
.accent       { font-family: var(--font-serif); font-style: normal; font-weight: 400; color: var(--identity-accent); letter-spacing: -0.005em; }
.accent--cool { font-family: var(--font-serif); font-style: normal; font-weight: 400; color: var(--brand-teal); letter-spacing: -0.005em; }

/* Focus ring — global. Brand yellow doubles as a system signal across all identities.
   Two-layer ring: a soft tinted halo behind a crisp yellow outline for premium depth. */
:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--brand-yellow) 22%, transparent);
  transition: box-shadow var(--dur-2) var(--ease-out),
              outline-offset var(--dur-2) var(--ease-out);
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Don't paint the halo on dark hero backgrounds — keep just the yellow outline. */
[data-hero-dark] :focus-visible,
.nav--over-hero :focus-visible {
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--brand-yellow) 35%, transparent);
}

/* Photo treatment — use on every brand photograph (spec §9). */
.photo-tone { filter: contrast(1.04) saturate(0.88) brightness(0.94); }

/* Selection — match the brand teal stripe at low intensity. */
::selection {
  background: color-mix(in oklch, var(--brand-teal-light) 35%, transparent);
  color: var(--ink);
}

/* Reduced motion — keep opacity transitions for comprehension; suppress movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}