/* ============================================================
   Explorable Explanations — Design Tokens ("Honey & ink")
   Load this file FIRST on every page, before main.css.
   Generated from the design-system project; edit values here to re-theme.
   ============================================================ */

/* ============================================
   Explorable Explanations — Webfonts
   --------------------------------------------
   Body/UI uses Source Sans 3 (humanist, more character than the original
   Arial stack). The chalk display role belongs to macOS "Chalkduster"
   (used on the logo); machines without it fall back to "Patrick Hand"
   from Google Fonts — the closest legible chalkboard hand.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Patrick+Hand&display=swap');

/* Chalkduster — the logo's chalk face. Not self-hosted (licence): macOS
   resolves the local font; other machines fall back to Patrick Hand. */
@font-face {
    font-family: 'Chalkduster';
    src: local('Chalkduster');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   Explorable Explanations — Colour Tokens
   --------------------------------------------
   "Honey & ink" refresh: the warm golden chalkboard palette, de-neoned.
   Honey gold is the single brand accent; warm inks replace default greys;
   each engineering discipline keeps its coding hue, used only as a thin
   rule / badge, never as fill.
   ============================================ */

:root {
    /* ---- Brand: honey-gold ramp ---- */
    --gold-100: #fffaea;   /* cream — page background, "chalkboard paper" */
    --gold-200: #faf0cd;   /* pale honey — info/key-point fills */
    --gold-300: #f7df8b;
    --gold-400: #f2c419;   /* PRIMARY — buttons, slider thumb, accents */
    --gold-500: #d9a414;   /* SECONDARY — hovers, pressed accents */
    --gold-600: #a87f10;   /* link gold — text-safe on cream */
    --gold-700: #8c690d;   /* deep gold — headings, value readouts */

    /* ---- Ink / warm neutrals ---- */
    --ink-900: #221f1a;
    --ink-800: #34302a;    /* primary text */
    --ink-600: #5d5749;    /* secondary text */
    --ink-500: #6b6354;    /* muted labels */
    --ink-400: #7d7565;    /* captions, breadcrumb */
    --ink-300: #948b78;    /* attributions, disabled text */
    --ink-200: #b8b0a0;
    --white:   #ffffff;

    /* ---- Surface neutrals (warm) ---- */
    --surface-page:     #fffaea;  /* cream */
    --surface-card:     #ffffff;  /* white cards */
    --surface-sunken:   #f8f5ec;  /* control panels, equation boxes */
    --surface-muted:    #f0ece1;  /* status displays */

    /* ---- Borders (warm hairlines) ---- */
    --border-soft:    #ece5d2;
    --border-default: #ded5bf;
    --border-strong:  #cfc5ab;
    --track:          #e6dfd0;    /* slider track */

    /* ---- Links ---- */
    --link:        #a87f10;
    --link-hover:  #1c01b8;       /* the brand's signature electric-indigo hover */

    /* ---- Semantic feedback (muted) ---- */
    --success:        #4f9143;
    --success-strong: #3c6e26;
    --success-bg:     #eef7e7;
    --success-line:   #88b86a;
    --success-hover:   #dcebc8;   /* quiz option hover */
    --success-divider: #c3d9a6;   /* quiz question divider */
    --success-surface: #f3f8ea;   /* quiz results panel */
    --danger:         #cf4534;
    --info:           #3d83c4;
    --info-strong:    #2e6da4;
    --info-bg:        #e9f3fb;
    --info-surface:   #eef4fa;    /* problem solution box */
    --info-border:    #bdd5e8;
    --info-tint:        rgba(61, 131, 196, 0.10);
    --info-tint-strong: rgba(61, 131, 196, 0.18);
    --warning:        #ddba50;    /* callout left-bar — muted honey */

    /* ---- Discipline coding (rule / badge only — site-faithful) ---- */
    --d-solidmech:     #607d8b;
    --d-dynamics:      #e91e63;
    --d-nonlinear:     #00897b;
    --d-fluids:        #03a9f4;
    --d-thermo:        #ff5722;
    --d-computational: #00bcd4;
    --d-automotive:    #8bc34a;
    --d-matsci:        #ff9800;
    --d-economics:     #9e9e9e;
    --d-games:         #f2c419;
    --d-renewables:    #2e7d32;

    /* ---- Stage badges (year level — site-faithful) ---- */
    --stage-y1:     #4caf50;
    --stage-y2:     #487091;
    --stage-y3:     #9c27b0;
    --stage-matsci: #ff9800;
    --stage-wip:    #e8cc3d;
    --stage-rail:   #7f1734;   /* claret — rail vehicle dynamics sims */
    --stage-renew:  #2e7d32;   /* forest green — renewable-energy limit sims */
    --stage-lab:    #5d4037;   /* bench brown — Virtual Laboratories (LAB badge) */

    /* ---- Semantic aliases ---- */
    --color-primary:        var(--gold-400);
    --color-primary-hover:  var(--gold-500);
    --text-body:            var(--ink-800);
    --text-muted:           var(--ink-500);
    --text-heading:         var(--gold-700);
    --text-value:           var(--gold-700);
}

/* ============================================
   Explorable Explanations — Typography Tokens
   --------------------------------------------
   Two roles: Source Sans 3 (humanist sans) for all body & UI text, and a
   chalk display face — real Chalkduster where installed (the logo's font),
   Patrick Hand as the web fallback. Numeric readouts use monospace.
   Headings lean on small-caps — a signature of the original site.
   ============================================ */

:root {
    /* ---- Families ---- */
    --font-body:    'Source Sans 3', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    --font-display: Chalkduster, 'Patrick Hand', 'Comic Sans MS', cursive;  /* chalk wordmark */
    --font-mono:    'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

    /* ---- Type scale (rem, 16px base) ---- */
    --text-xs:   0.75rem;   /* 12px — control labels, value readouts */
    --text-sm:   0.85rem;   /* 13.6px — captions, badges */
    --text-base: 1rem;      /* 16px — body, buttons */
    --text-md:   1.2rem;    /* 19.2px — subtitle, status value */
    --text-lg:   1.5rem;    /* 24px — h3 / section labels */
    --text-xl:   2rem;      /* 32px — h2 / panel titles */
    --text-2xl:  2.5rem;    /* 40px — h1 page title */
    --text-3xl:  3.5rem;    /* 56px — hero display */

    /* ---- Weights ---- */
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ---- Line heights ---- */
    --leading-tight: 1.2;
    --leading-snug:  1.4;
    --leading-body:  1.6;

    /* ---- Letter spacing ---- */
    --tracking-label: 0.08em;   /* uppercased discipline headers */
    --tracking-normal: 0;
}

/* ============================================
   Explorable Explanations — Spacing & Radius Tokens
   --------------------------------------------
   The site is built on an 8px rhythm with generous 1.6 line-height.
   Corners are tight and editorial: 4px default, smaller for chips/inputs.
   ============================================ */

:root {
    /* ---- Spacing scale (8px rhythm) ---- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  15px;   /* the site's workhorse padding */
    --space-5:  20px;   /* card / section padding */
    --space-6:  24px;
    --space-8:  30px;
    --space-10: 40px;

    /* ---- Radii (tight, editorial) ---- */
    --radius-xs:   2px;   /* chips, small inputs */
    --radius-sm:   3px;   /* equation boxes, canvas holders */
    --radius-md:   4px;   /* selects */
    --radius-lg:   4px;   /* DEFAULT — buttons, cards, panels */
    --radius-pill: 5px;   /* badges */
    --radius-round: 50%;  /* slider thumb, avatars */

    /* ---- Layout ---- */
    --container-max: 1200px;
    --content-pad:   20px;
}

/* ============================================
   Explorable Explanations — Effects Tokens
   --------------------------------------------
   Honey & ink: hairline, warm-tinted shadows (no grey blur), a quick
   0.3s default transition, and the signature lift-on-hover. The feel is
   paper-on-a-desk, not glassmorphism.
   ============================================ */

:root {
    /* ---- Shadows (warm hairlines) ---- */
    --shadow-card:    0 1px 2px rgba(92, 71, 10, 0.10);   /* cards, panels */
    --shadow-hover:   0 2px 5px rgba(92, 71, 10, 0.16);   /* card hover */
    --shadow-raised:  0 2px 5px rgba(92, 71, 10, 0.18);   /* button hover lift */
    --shadow-pressed: 0 1px 2px rgba(92, 71, 10, 0.15);   /* button active */
    --shadow-thumb:   0 1px 3px rgba(60, 45, 5, 0.30);    /* slider thumb */
    --shadow-footer:  0 -1px 2px rgba(92, 71, 10, 0.10);  /* footer (top shadow) */

    /* ---- Focus ring (honey glow) ---- */
    --focus-ring: 0 0 0 3px rgba(242, 196, 25, 0.25);

    /* ---- Transitions ---- */
    --transition-fast: 0.2s ease;     /* @kind other */
    --transition:      0.3s;          /* @kind other */

    /* ---- Border widths ---- */
    --rule-thin:   1px;
    --rule-accent: 2px;   /* heading underlines, discipline rules */
    --rule-bar:    3px;   /* info-box / key-point left bars (muted) */
}