/* ==========================================================================
   Novera Languages — Design Tokens
   Single source of truth for colour, type, spacing. Never hardcode a hex,
   size, or space value in a component — reference a token here.
   Palette is the client's mockup, built exactly. See docs/DECISIONS.md.
   ========================================================================== */

:root {
  /* --- Brand palette (from the client's mockup swatch panel) --- */
  --navy:      #0D1B3D;   /* Deep Navy — primary: headings, footer, dark bands */
  --teal:      #00A99D;   /* Teal — secondary brand, primary icon accent */
  --coral:     #FF5A5F;   /* Coral — decorative + large CTA (see --coral-cta) */
  --purple:    #6B4EFF;   /* Royal Purple — tertiary accent, sign-language motif */
  --yellow:    #FFB81C;   /* Golden Yellow — tertiary accent, "trusted" motif */
  --ice-blue:  #E6F2FF;   /* Ice Blue — light section background */
  --soft-gray: #F5F7FA;   /* Soft Gray — alternate section background */
  --white:     #FFFFFF;

  /* --- Derived working tokens (text/contrast needs; not in her panel) --- */
  --navy-800:  #0A1530;   /* deepest — footer ground */
  --navy-700:  #1B2E5C;   /* lifted navy — cards/icons on navy */
  --ink:       #0D1B3D;   /* heading text */
  --text:      #2A3350;   /* body text — navy-tinted, ~10:1 on white */
  --muted:     #5B6478;   /* supporting text — ~5.4:1 on white */
  --border:    #DCE3EE;   /* hairlines, card borders */
  --teal-text: #00786F;   /* darkened teal — the ONLY teal allowed to carry text (5.36:1 AA) */
  --coral-cta: #CE2E38;   /* darkened coral — the ONLY coral allowed to carry white text (5.16:1 AA) */

  /* Semantic roles — components reference these, not raw colours */
  --bg:            var(--white);
  --bg-alt:        var(--soft-gray);
  --bg-tint:       var(--ice-blue);
  --bg-dark:       var(--navy);
  --brand:         var(--navy);
  --brand-2:       var(--teal);
  --on-dark:       #EAF0FB;
  --on-dark-muted: #9FB0CE;

  /* Rainbow gradient accent — decorative / hairline / edge use ONLY, never behind text */
  --grad: linear-gradient(90deg, #6B4EFF 0%, #3B82F6 28%, #00A99D 52%, #FFB81C 78%, #FF5A5F 100%);

  /* --- Typography ---
     Headings: geometric grotesque (matches the mockup's bold sans).
     Body: humanist sans. Self-hosted; @font-face lives in base.css. */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Fluid type scale — clamp() so nothing needs a per-size breakpoint */
  --fs-eyebrow: .72rem;
  --fs-small:   .875rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3rem);
  --fs-h1:      clamp(2.4rem, 6vw, 4.5rem);
  --lh-tight:   1.08;
  --lh-snug:    1.3;
  --lh-body:    1.65;

  /* --- Spacing scale (rem) --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);   /* vertical rhythm between sections */

  /* --- Layout --- */
  --wrap:      min(1200px, 100% - 2.5rem);   /* page gutter, never overflows */
  --wrap-narrow: min(760px, 100% - 2.5rem);  /* reading measure for prose pages */

  /* --- Radii, borders, shadow --- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13,27,61,.04), 0 6px 20px rgba(13,27,61,.06);
  --shadow-lift: 0 10px 34px rgba(13,27,61,.12);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.7,.28,1);
  --dur:  .55s;
}