/* =============================================================================
   TERRA-TECH — DESIGN TOKENS
   The single source of truth for colour, type, layout and motion.
   Values are taken from Documentation/Wireframe/Requirement.md §4, §5, §6, §10.

   §15 asks for standalone page files with inline CSS; §16 asks for no hard-coded
   hex values in page files. Both hold: this block is inlined verbatim at the top
   of every page's <style>, and every rule in every page references var() only.
   Change a value here, re-run the build, and it propagates.
   ========================================================================== */

:root {

  /* --- Colour: navy scale (§4.2) ----------------------------------------- */
  --navy-900: #16293A;  /* Ink — body text, footer, deepest bands            */
  --navy-700: #1C3849;  /* Hover state for primary buttons                   */
  --navy-600: #23455E;  /* PRIMARY (client-supplied)                         */
  --navy-400: #4A6B82;  /* Secondary text on dark surfaces                   */
  --navy-200: #A8BAC7;  /* Dividers and muted text on dark                   */
  --navy-050: #E8EDF1;  /* Tinted light surface, table stripes, hover fill   */

  /* --- Colour: amber scale (§4.2) ---------------------------------------- */
  --amber-600: #8F5F22; /* Amber DEEP — the only amber legible as text on light */
  --amber-500: #D59249; /* SECONDARY (client-supplied) — fills, rules, accents  */
  --amber-300: #E8BC8C; /* Diagram secondary state, disabled accent            */
  --amber-100: #F7E7D4; /* Soft highlight fill, callout background             */

  /* --- Colour: neutrals (§4.2) ------------------------------------------- */
  --white:    #FFFFFF;  /* Card and content surface                          */
  --grey-100: #F2F2F2;  /* SURFACE (client-supplied) — page background       */
  --grey-200: #E0E0E0;  /* Borders, hairlines, dividers                      */
  --grey-500: #5A6672;  /* Secondary and supporting body text                */

  /* --- Colour: semantic (§4.2) ------------------------------------------- */
  --text-primary:   var(--navy-900);
  --text-secondary: var(--grey-500);
  --text-inverse:   var(--white);
  --border-default: var(--grey-200);
  --accent:         var(--amber-500);

  /* Two aliases the §4.3 prohibitions depend on. Amber #D59249 is 2.61:1 on
     white — it is NEVER a text colour on a light surface. Use --accent for
     rules, fills and non-text marks; --accent-text for amber-coloured text. */
  --accent-text:    var(--amber-600);
  --accent-fill:    var(--amber-100);

  /* --- Typefaces (§5.1) --------------------------------------------------- */
  --f-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --f-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Layout (§6) -------------------------------------------------------- */
  --container:  1440px;   /* 1280px content + 2 × 80px outer margin */
  --gutter:     24px;
  --margin:     80px;     /* 40px tablet · 20px mobile — see breakpoints */
  --section-y:  128px;    /* 96px tablet · 64px mobile */
  --card-pad:   32px;
  --r-sm:       4px;      /* inputs, buttons, tags */
  --r-md:       8px;      /* cards, panels */

  /* The only shadow on the site. Hover state only (§6.2). */
  --shadow-hover: 0 6px 20px rgba(35, 69, 94, 0.08);

  /* --- Motion (§10.2) ----------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;   /* hover, focus, micro-interaction */
  --duration-base: 500ms;   /* section entry */
  --duration-slow: 1000ms;  /* line-draw sequences */
  --stagger:       70ms;    /* between sibling cards */
  --travel:        20px;    /* entry translate distance */
}