/* ===========================================================================
   Design tokens
   ---------------------------------------------------------------------------
   Direction: a chronicle, not a game UI. The site is primarily a place people
   read, and the weekly cadence makes it a record being kept rather than a
   dashboard being checked.

   Palette is ink on cold paper with oxidised copper as the single accent.
   Deliberately not warm cream and terracotta, which is the default look for
   anything fantasy-adjacent and reads as a stock choice.

   Type is Literata for the body — it was designed specifically for long-form
   reading on screens, which is exactly the brief when you are asking someone to
   read 120,000 words on a phone. Fraunces carries the display voice. Archivo
   handles labels and data.

   Everything here is meant to be overridden. If you want a different look, the
   whole visual identity lives in this one file.
   ======================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */

  --paper:          #EDEFEA;  /* pale linen with a green cast, not cream */
  --paper-raised:   #F7F8F5;
  --paper-sunken:   #E2E5DE;

  --ink:            #191E1B;  /* near-black, cool */
  --ink-soft:       #4C564F;
  --ink-faint:      #7B857E;

  --verdigris:      #2E7D6B;  /* the accent — oxidised copper */
  --verdigris-deep: #1D5749;
  --verdigris-wash: #DCE8E4;

  --madder:         #8E2F3D;  /* warnings, destructive actions, urgency */
  --madder-wash:    #F2E0E2;

  --gold-leaf:      #B08A3E;  /* rare and precious. Use almost never. */

  --rule:           #CBD1C9;
  --rule-strong:    #A9B2A7;

  /* Semantic aliases — reference these in components, not the raw names */
  --bg:             var(--paper);
  --bg-raised:      var(--paper-raised);
  --fg:             var(--ink);
  --fg-muted:       var(--ink-soft);
  --fg-faint:       var(--ink-faint);
  --accent:         var(--verdigris);
  --accent-strong:  var(--verdigris-deep);
  --accent-wash:    var(--verdigris-wash);
  --danger:         var(--madder);
  --danger-wash:    var(--madder-wash);
  --border:         var(--rule);

  /* --- Type -------------------------------------------------------------- */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Literata', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* Fluid scale. Minimums are sized for a 390px phone, maximums for desktop.
     Body sits at 17px on mobile — larger than the usual 16px because this site
     asks people to read for a long time. */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem);
  --text-2xl:  clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;   /* generous — also stops tooltip hit areas colliding */
  --leading-loose: 1.85;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.06em;

  /* --- Space ------------------------------------------------------------- */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* --- Layout ------------------------------------------------------------ */

  --measure:      66ch;    /* reading column — do not exceed for body text */
  --measure-wide: 88ch;
  --page-max:     72rem;
  --gutter:       clamp(1rem, 4vw, 2.5rem);

  /* --- Interaction ------------------------------------------------------- */

  --tap-min: 44px;   /* minimum comfortable touch target */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
  --radius-sheet: 16px;

  --shadow-sm: 0 1px 2px rgb(25 30 27 / 0.06);
  --shadow:    0 4px 14px rgb(25 30 27 / 0.10);
  --shadow-lg: 0 -8px 32px rgb(25 30 27 / 0.18);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-tooltip: 300;
  --z-sheet:  400;
}

/* --- Dark ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #141815;
    --paper-raised: #1D2320;
    --paper-sunken: #0E110F;

    --ink:          #E4E8E2;
    --ink-soft:     #A9B3AB;
    --ink-faint:    #75807A;

    --verdigris:      #5FB8A2;
    --verdigris-deep: #8ED4C0;
    --verdigris-wash: #1B3630;

    --madder:      #D97583;
    --madder-wash: #3A1D22;

    --gold-leaf: #D4AE64;

    --rule:        #2E3733;
    --rule-strong: #46524C;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow:    0 4px 14px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 -8px 32px rgb(0 0 0 / 0.6);
  }
}