/* colors.css */
/* ============================================================
   COLOUR  ·  Chameleon
   Two contexts share one system. Office is the default (greys,
   neutral and precise). Education warms it up (forest + sage).
   Flat fields only — no gradients, ever.
   Usage ratio 60% surface · 30% ink/support · 10% accent.
   ============================================================ */

:root {
  /* --- Office palette (default context) --- */
  --office-white:      #FFFFFF; /* Surface */
  --office-soft-clay:  #E9E9E9; /* Raised surface / fill */
  --office-black-15:   #D9D9D9; /* Line / hairline (15% black) */
  --office-black-40:   #A7A9AC; /* Muted / large text only (40% black) */
  --office-black-70:   #6D6E71; /* Ink / body (70% black) */
  --office-black-85:   #404042; /* Deep grey — emphasis on web */
  --office-ink:        #2B2B2D; /* Headings on web (near-black) */
  --office-black-70-hover: #5B5C5F; /* Primary darken-on-hover */

  /* --- Education palette --- */
  --edu-white:      #FFFFFF;
  --edu-foggy-mist: #D5E2DF; /* Line / soft fill */
  --edu-light-teal: #6B9086; /* Muted / support */
  --edu-forest:     #4A645D; /* Primary / ink accent */
  --edu-forest-hover: #3D534D; /* Primary darken-on-hover */
  --edu-deep-sage:  #172823; /* Deepest ink / dark surface */

  /* --- Sage-tinted focus + elevation tints (shared) --- */
  --focus-ring: #4A645D;

  /* ------------------------------------------------------------
     SEMANTIC ROLES — Office context (default)
     Consume these in components, never the raw palette above.
     ------------------------------------------------------------ */
  --surface:        var(--office-white);   /* page background */
  --surface-raised: var(--office-soft-clay);/* cards, fills, wells */
  --surface-inverse:#3A3B3D;               /* dark blocks in office ctx */
  --ink:            var(--office-black-70); /* body + headings */
  --ink-on-accent:  #FFFFFF;               /* text on primary */
  --muted:          var(--office-black-40); /* secondary text, large only */
  --line:           var(--office-black-15); /* hairlines, borders */
  --line-strong:    var(--office-black-40); /* emphasised borders */

  --primary:        var(--office-black-70); /* filled buttons */
  --primary-hover:  var(--office-black-70-hover);
  --accent:         var(--office-black-70); /* the 10% */
  --accent-soft:    var(--office-soft-clay);/* accent wash / chip fill */

  /* --- Text roles (web) ---
     Screen sets more black than print: headings step down to near-black
     so they hold against body copy. Body stays 70% black; secondary and
     muted text share 40% black (large or supporting text only). */
  --text-strong:      var(--office-ink);       /* headings, emphasised values */
  --text-primary:     var(--office-black-70);  /* body copy, nav, labels */
  --text-secondary:   var(--office-black-40);  /* captions, breadcrumbs */
  --text-muted:       var(--office-black-40);  /* eyebrows, meta, disabled */
  --text-on-inverse:  #FFFFFF;                 /* text on dark blocks */
  --text-on-accent:   #FFFFFF;                 /* text on filled accent */
}

/* ------------------------------------------------------------
   EDUCATION CONTEXT
   Wrap any subtree in [data-context="education"] to switch the
   semantic roles to the forest + sage palette. Same tokens,
   warmer values — components need no changes.
   ------------------------------------------------------------ */
[data-context="education"] {
  --surface:        var(--edu-white);
  --surface-raised: var(--edu-foggy-mist);
  --surface-inverse:var(--edu-deep-sage);
  --ink:            var(--edu-deep-sage);
  --ink-on-accent:  #FFFFFF;
  --muted:          var(--edu-light-teal);
  --line:           var(--edu-foggy-mist);
  --line-strong:    var(--edu-light-teal);

  --primary:        var(--edu-forest);
  --primary-hover:  var(--edu-forest-hover);
  --accent:         var(--edu-forest);
  --accent-soft:    var(--edu-foggy-mist);

  /* Text roles — forest leads, deep sage is the emphasis step */
  --text-strong:      var(--edu-deep-sage);
  --text-primary:     var(--edu-forest);
  --text-secondary:   var(--edu-light-teal);
  --text-muted:       var(--edu-light-teal);
  --text-on-inverse:  #FFFFFF;
  --text-on-accent:   #FFFFFF;
}

/* Dark surface helper — deep sage block, white ink.
   Apply .surface-dark to any container that sits on Deep Sage /
   Forest so the logo + text flip to white automatically. */
.surface-dark {
  --surface: var(--edu-deep-sage);
  --surface-raised: var(--edu-forest);
  --ink: #FFFFFF;
  --muted: var(--edu-foggy-mist);
  --line: rgba(255,255,255,0.16);
  --line-strong: rgba(255,255,255,0.32);

  /* Text roles on a dark field — no near-black step; mist carries support */
  --text-strong:    #FFFFFF;
  --text-primary:   #FFFFFF;
  --text-secondary: var(--edu-foggy-mist);
  --text-muted:     var(--edu-foggy-mist);
  background: var(--surface);
  color: var(--ink);
}

/* typography.css */
/* ============================================================
   TYPOGRAPHY  ·  Chameleon
   Geist is the single typeface — Light (300) is the signature weight.
   Quotes and display sit in Geist too, at large sizes with tight tracking.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", system-ui, sans-serif; /* alias — same family, display sizes */

  /* Weights */
  --fw-light: 300;   /* @kind font */ /* signature */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */

  /* Type scale (px). Display & headings lead with Light. */
  --fs-display: 56px; /* Display   · Light  */
  --fs-h1:      40px; /* Heading 1 · Light  */
  --fs-h2:      30px; /* Heading 2 · Light  */
  --fs-h3:      22px; /* Heading 3 · Regular */
  --fs-h4:      18px; /* Heading 4 · Medium  */
  --fs-body:    16px; /* Body      · Light  */
  --fs-small:   14px; /* Support / captions  */
  --fs-caption: 12px; /* Labels, eyebrows    */

  /* Line heights — airy, calm rhythm */
  --lh-tight: 1.05;   /* @kind other */
  --lh-snug:  1.2;    /* @kind other */
  --lh-body:  1.6;    /* @kind other */

  /* Letter spacing — eyebrows/labels use the wide tracking
     seen throughout the brand book (C H A M E L E O N). */
  --ls-eyebrow: 0.22em; /* @kind other */
  --ls-tight: -0.01em;  /* @kind other */
  --ls-normal: 0;       /* @kind other */
}

/* -------- Optional utility classes (components use tokens) -------- */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.t-h1 { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); }
.t-body { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.t-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* spacing.css */
/* ============================================================
   SPACING & GRID  ·  Chameleon
   4px base unit. Whitespace is the field — be generous.
   12-column grid with wide gutters.
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 32px;      /* generous */
  --container-max: 1200px;  /* content width */
  --container-pad: 48px;    /* page margin at desktop */
  --hairline: 1px;          /* the single line that sets the horizon */
}

/* radius.css */
/* ============================================================
   THE CORNER  ·  Chameleon's defining gesture
   One rounded corner, bottom-right. Same shape, same radius,
   stacked and adjoining. "One corner, not four."
   Tokenised as --tab: border-radius: 0 0 R 0 (TL TR BR BL).
   ============================================================ */

:root {
  /* Radius scale — the "R" in 0 0 R 0 */
  --radius-xs: 6px;   /* badges, tiny chips */
  --radius-sm: 10px;  /* capsules, inputs, small controls */
  --radius-md: 14px;  /* buttons, standard controls */
  --radius-lg: 22px;  /* cards, panels */
  --radius-xl: 36px;  /* image blocks, hero surfaces */

  /* The gesture, ready to drop onto border-radius.
     Only the bottom-right corner rounds. */
  --corner-xs: 0 0 var(--radius-xs) 0;
  --corner-sm: 0 0 var(--radius-sm) 0;
  --corner-md: 0 0 var(--radius-md) 0;
  --corner-lg: 0 0 var(--radius-lg) 0;
  --corner-xl: 0 0 var(--radius-xl) 0;
}

/* Utility: apply the corner at a given scale.
   Photography and collages follow the same rule — only the
   bottom-right corner of the whole image rounds. */
.corner-sm { border-radius: var(--corner-sm); }
.corner-md { border-radius: var(--corner-md); }
.corner-lg { border-radius: var(--corner-lg); }
.corner-xl { border-radius: var(--corner-xl); }

/* motion.css */
/* ============================================================
   MOTION  ·  Chameleon
   Quiet. 120–360ms. Fades and short slides. No bounce, no spring.
   Cards lift ~3px; primary darkens on hover. Always honour
   prefers-reduced-motion.
   ============================================================ */

:root {
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */

  /* Quiet ease — no overshoot */
  --ease-quiet: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.4, 0.0, 1, 1);   /* @kind other */

  --lift: 3px; /* @kind other */
}

@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;
  }
}

/* base.css */
/* base.css — minimal reset + brand defaults.
   Kept out of styles.css's token closure logic; applies page-level
   defaults so surfaces render calm and airy out of the box. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to Light, the signature weight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
h3, h4 { font-weight: var(--fw-regular); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border-radius: var(--radius-xs);
}

hr { border: none; border-top: var(--hairline) solid var(--line); margin: var(--space-8) 0; }

::selection { background: var(--accent-soft); }