/* ansatz / design tokens
 *
 * the earthen palette: warm umber metal and moss-green mechanism
 * against dark soil. layered surfaces (--void, --void-2, --void-3) give
 * us implied depth without drawing borders. metals (bronze, copper,
 * silver) carry the antikhythera vibe; the esoteric accents (vermilion,
 * celadon, indigo) appear sparingly for state. nothing here glows like
 * neon.
 *
 * naming convention:
 *   --void-N        bg surfaces, lower index = deeper
 *   --line-*        borders / engraved hairlines
 *   --ink, --ink-*  text shades (warm)
 *   --bronze-*      primary metallic accent
 *   --copper        warm secondary metallic
 *   --silver        cool metallic highlight
 *   --moss-*        green mechanism accent
 *   --vermilion     alert / danger
 *   --celadon       ok / steady
 *   --indigo        cool system / deep accents
 */

:root {
  /* canvas / surface */
  --void:           #0a0907;
  --void-2:         #12100c;
  --void-3:         #1c1913;

  /* lines */
  --line:           #2c2820;
  --line-warm:      #3a3024;

  /* ink */
  --ink:            #ded3bd;
  --ink-dim:        #8f8672;
  --ink-faint:      #4e4737;

  /* metals */
  --bronze:         #b98b53;
  --bronze-deep:    #7a5530;
  --bronze-faint:   #4e3a22;
  --bronze-glow:    oklch(0.72 0.10 70 / 0.5);
  --copper:         #a5613a;
  --silver:         #bfc7ae;

  /* moss — the green half of the earthen pair */
  --moss:           #7d9b56;
  --moss-deep:      #4c6337;
  --moss-faint:     #33402a;

  /* esoteric accents */
  --vermilion:      #b0533c;
  --celadon:        #7fa07a;
  --indigo:         #5f8f6a;

  /* analogous harmony around the bronze (hue ~30°). use sparingly as
   * accent paint for engraved layers; the main palette stays warm-on-
   * cold, and these are deliberately saturated so they read against
   * the deep void without lighting up like neon.
   */
  --amber:          #c08a4a;
  --citrine:        #b0a84a;
  --carmine:        #8f3d2c;
  --olivine:        #8a9c4b;
  --rose:           #a6684f;
  --jade:           #5c8f4d;

  /* engraved-back palette: a deep ember plate with a thin bronze
   * engraving line. derived from --amber so the back reads as the
   * shadowed underside of the same metal that makes the gears.
   */
  --ember:          oklch(0.24 0.045 62);
  --ember-deep:     oklch(0.15 0.030 55);
  --ember-engrave:  oklch(0.62 0.080 78 / 0.7);
  --ember-screw:    oklch(0.32 0.050 58);

  /* the back-plate mechanism metal: oxidised, mossy green. reads as
   * verdigris on old bronze against the warm ember plate, so the
   * earthen pair is brown in front and green behind.
   */
  --steel:          oklch(0.78 0.045 138);
  --steel-mid:      oklch(0.60 0.070 138);
  --steel-deep:     oklch(0.42 0.055 138);
  --steel-glow:     oklch(0.80 0.050 138 / 0.45);

  /* type families */
  --serif:          'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --sans:           'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --display:        'Cinzel', var(--serif);
  --mono:           'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* type scale (modest, lean on size + tracking for hierarchy) */
  --t-tiny:         0.75rem;
  --t-small:        0.875rem;
  --t-body:         1rem;
  --t-lead:         1.125rem;
  --t-display-s:    1.5rem;
  --t-display-m:    2.5rem;
  --t-display-l:    4rem;
  --t-display-xl:   6rem;

  /* spacing (multiples of 4px, roughly) */
  --s-1:            0.25rem;
  --s-2:            0.5rem;
  --s-3:            0.75rem;
  --s-4:            1rem;
  --s-6:            1.5rem;
  --s-8:            2rem;
  --s-12:           3rem;
  --s-16:           4rem;
  --s-24:           6rem;

  /* radii (sharp by default, almost nothing curved) */
  --r-1:            1px;
  --r-2:            2px;
  --r-pill:         999px;

  /* timing */
  --t-snap:         120ms;
  --t-soft:         260ms;
  --t-slow:         640ms;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-mech:      cubic-bezier(0.6, 0.05, 0.4, 0.95); /* the "engaging gear" feel */

  /* z-stack */
  --z-stars:        0;
  --z-quantum:      1;
  --z-content:      10;
  --z-chrome:       20;
  --z-tooltip:      40;
  --z-dialog:       60;

  /* semantic aliases (use these in components, not raw tokens) */
  --bg:             var(--void);
  --bg-raised:      var(--void-2);
  --bg-floating:    var(--void-3);
  --hairline:       var(--line);
  --hairline-warm:  var(--line-warm);
  --text:           var(--ink);
  --text-dim:       var(--ink-dim);
  --text-faint:     var(--ink-faint);
  --accent:         var(--bronze);
  --accent-deep:    var(--bronze-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-snap:       0ms;
    --t-soft:       0ms;
    --t-slow:       0ms;
  }
}