/* ============================================================
   THE LEDGER — Design tokens
   Single source of truth for colour, type, space, motion.
   Nothing below this file may hardcode a raw value.
   ============================================================ */

:root {
  /* ── Colour: Paper (light) is the primary theme ───────────── */
  --ink:        #0E1116;
  --ink-2:      #2A2F37;
  --ink-3:      #5C636E;
  --paper:      #F4F1EC;
  --paper-2:    #FBF9F6;
  --paper-3:    #EEEAE3;
  --rule:       #DDD7CE;
  --rule-strong:#C9C1B4;

  /* Two brasses, and the distinction is load-bearing.
     --brass is decorative: hairlines, marks, the display em. It sits at 3.10:1
     on paper, which is the correct bar for non-text UI but fails for text.
     --brass-strong is the text-safe cut at 5.47:1 on paper, and carries
     near-white at 5.87:1 when used as a fill. Never set small text in --brass. */
  --brass:        #A8834E;
  --brass-strong: #7A5C33;
  --brass-tint:   rgba(168, 131, 78, 0.10);

  /* Semantic aliases — components reference these, never the raw ramp. */
  --bg:            var(--paper);
  --bg-raised:     var(--paper-2);
  --bg-sunken:     var(--paper-3);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --text-subtle:   var(--ink-3);
  --border:        var(--rule);
  --border-strong: var(--rule-strong);
  --accent:        var(--brass);
  --accent-strong: var(--brass-strong);
  --accent-hover:  var(--brass-strong);
  --accent-tint:   var(--brass-tint);

  --on-accent:  #FBF9F6;
  --focus-ring: var(--brass-strong);

  /* Status. Deliberately desaturated — a pillar-box red would be the only
     loud thing on the site. Both are AA on paper as small text. */
  --error:       #A32F26;
  --error-tint:  rgba(163, 47, 38, 0.07);
  --success:     #2C6247;
  --success-tint: rgba(44, 98, 71, 0.07);

  /* Nav glass — the only place backdrop-filter is permitted. */
  --glass-bg:     rgba(244, 241, 236, 0.72);
  --glass-border: rgba(168, 131, 78, 0.22);

  --selection-bg:   var(--ink);
  --selection-text: var(--paper);

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-display: clamp(2.75rem, 6vw + 1rem, 6rem);
  --text-h1:      clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --text-h2:      clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  --text-h3:      clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  --text-lead:    clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --text-body:    1.0625rem;
  --text-small:   0.875rem;
  --text-micro:   0.75rem;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.7;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-label:   0.12em;

  --measure:       68ch;
  --measure-short: 46ch;

  /* ── Space: 8px system ────────────────────────────────────── */
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  1rem;     /*  16 */
  --space-4:  1.5rem;   /*  24 */
  --space-5:  2rem;     /*  32 */
  --space-6:  3rem;     /*  48 */
  --space-7:  4rem;     /*  64 */
  --space-8:  6rem;     /*  96 */
  --space-9:  8rem;     /* 128 */
  --space-10: 10rem;    /* 160 */
  --space-11: 12rem;    /* 192 */

  /* Sections breathe. This is intentionally larger than feels comfortable. */
  --section-y:      clamp(6rem, 12vh, 12rem);
  --section-y-tight: clamp(4rem, 8vh, 7rem);

  /* ── Grid ─────────────────────────────────────────────────── */
  --container:  1280px;
  --container-narrow: 880px;
  --gutter:     1.5rem;
  --page-x:     clamp(1.25rem, 5vw, 5rem);

  /* ── Radius — near-square reads luxury; heavy rounding reads app ── */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* ── Elevation — used almost nowhere by design ────────────── */
  --shadow-nav:   0 1px 24px rgba(14, 17, 22, 0.06);
  --shadow-modal: 0 24px 64px -12px rgba(14, 17, 22, 0.22);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --dur-micro: 200ms;
  --dur:       400ms;
  --dur-slow:  600ms;

  /* ── Layers ───────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-cursor:  400;
}

/* ── Ink (dark): a designed second theme, not an inversion ──── */
:root[data-theme="dark"] {
  --bg:            #0E1116;
  --bg-raised:     #171B22;
  --bg-sunken:     #0A0D11;
  --text:          #F4F1EC;
  --text-muted:    #B8BDC6;
  --text-subtle:   #858C97;
  --border:        #262C36;
  --border-strong: #39414E;

  /* On ink, brass already reaches 7.94:1, so the decorative and text-safe
     cuts are the same colour. Only the light theme needs the darker tier. */
  --accent:        #C6A272;
  --accent-strong: #C6A272;
  --accent-hover:  #DBBC8F;
  --accent-tint:   rgba(198, 162, 114, 0.12);

  --on-accent:  #0E1116;
  --focus-ring: #C6A272;

  /* Lifted for ink: the light-theme reds and greens would sit at ~2:1 here. */
  --error:        #E8918A;
  --error-tint:   rgba(232, 145, 138, 0.10);
  --success:      #7FBF9B;
  --success-tint: rgba(127, 191, 155, 0.10);

  --glass-bg:     rgba(14, 17, 22, 0.72);
  --glass-border: rgba(198, 162, 114, 0.20);

  --selection-bg:   #C6A272;
  --selection-text: #0E1116;

  --shadow-nav:   0 1px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);
}

/* Honour the OS preference until the visitor chooses explicitly.
   The inline script in <head> stamps data-theme before first paint, so this
   block only matters for the no-JS case. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1116;
    --bg-raised:     #171B22;
    --bg-sunken:     #0A0D11;
    --text:          #F4F1EC;
    --text-muted:    #B8BDC6;
    --text-subtle:   #858C97;
    --border:        #262C36;
    --border-strong: #39414E;
    --accent:        #C6A272;
    --accent-strong: #C6A272;
    --accent-hover:  #DBBC8F;
    --accent-tint:   rgba(198, 162, 114, 0.12);

    --on-accent:  #0E1116;
    --focus-ring: #C6A272;

    --error:        #E8918A;
    --error-tint:   rgba(232, 145, 138, 0.10);
    --success:      #7FBF9B;
    --success-tint: rgba(127, 191, 155, 0.10);

    --glass-bg:     rgba(14, 17, 22, 0.72);
    --glass-border: rgba(198, 162, 114, 0.20);

    --selection-bg:   #C6A272;
    --selection-text: #0E1116;

    --shadow-nav:   0 1px 24px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);
  }
}