/* ============================================================
   LEDGER · the Semih Asaroglu design system
   Route 02, chosen 23 Aug 2026. Source of truth for every build.

   Contrast ratios verified against the ground of their own theme.
   Anything marked AA-large is for 18.66px+ or bold 14px+ only.

   Fonts: Source Serif 4 (display + body), Archivo (labels + UI).
   https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700&display=swap
   ============================================================ */

:root {
  /* --- surfaces ------------------------------------------- */
  --paper:      #EFEFEA;   /* the ground                        */
  --paper-2:    #F6F6F2;   /* raised: cards, panels             */
  --paper-3:    #E6E6DF;   /* sunken: fills, code, table stripe */

  /* --- ink ------------------------------------------------- */
  --ink:        #1B1C18;   /* primary text        14.8:1  AAA   */
  --ink-2:      #54564E;   /* secondary text       6.5:1  AA    */
  --ink-3:      #6B6D63;   /* meta, captions       4.6:1  AA    */

  /* --- rules ----------------------------------------------- */
  --rule:       #D6D7CF;   /* hairline                          */
  --rule-2:     #C2C4B9;   /* emphasis rule, table head         */

  /* --- accent: deep green ---------------------------------- */
  --green:      #1D4B39;   /* accent text + fills  8.6:1  AAA   */
  --green-2:    #16382B;   /* pressed / hover-dark              */
  --green-3:    #2F6B52;   /* lighter, for on-dark fills        */
  --green-wash: rgba(29, 75, 57, .08);
  --on-green:   #F3F4EF;   /* text on a green fill              */

  /* --- semantic: audit scorecards, status ------------------ */
  --ok:         #1D4B39;   /* same as accent, deliberately      */
  --warn:       #855C0F;   /*                      5.2:1  AA    */
  --crit:       #8E2B22;   /*                      7.2:1  AA    */
  --ok-wash:    rgba(29, 75, 57, .09);
  --warn-wash:  rgba(133, 92, 15, .11);
  --crit-wash:  rgba(142, 43, 34, .09);

  /* --- type ------------------------------------------------ */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* scale. Display uses the serif, labels use the sans.        */
  --t-display-xl: 3.5rem;      /* 56 · proposal covers          */
  --t-display-l:  2.5rem;      /* 40 · page titles              */
  --t-head-m:     1.75rem;     /* 28 · section heads            */
  --t-head-s:     1.25rem;     /* 20 · subheads                 */
  --t-body-l:     1.1875rem;   /* 19 · lede                     */
  --t-body:       1.0625rem;   /* 17 · running text             */
  --t-body-s:     0.9375rem;   /* 15 · dense text, tables       */
  --t-meta:       0.875rem;    /* 14 · data, tabular            */
  --t-label:      0.6875rem;   /* 11 · uppercase eyebrows       */

  /* --- spacing. 4px base ----------------------------------- */
  --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;     --s-32: 8rem;

  /* --- layout ---------------------------------------------- */
  --measure:    66ch;    /* running text never exceeds this     */
  --measure-sm: 48ch;    /* ledes, pull quotes                  */
  --page:       72rem;   /* max content width                   */
  --radius:     0;       /* system rule: square corners only    */
}

/* --- dark. Designed, not inverted. Warm-neutral, never blue-black. --- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1A1A17;
    --paper-2:    #232320;
    --paper-3:    #2C2C28;

    --ink:        #EFEFEA;   /* 15.1:1  AAA */
    --ink-2:      #A9AA9F;   /*  7.5:1  AA  */
    --ink-3:      #83857A;   /*  4.7:1  AA  */

    --rule:       #34342F;
    --rule-2:     #45463F;

    --green:      #6FBF97;   /*  8.0:1  AAA */
    --green-2:    #8FD4B0;
    --green-3:    #4E9B76;
    --green-wash: rgba(111, 191, 151, .12);
    --on-green:   #12211A;

    --ok:         #6FBF97;
    --warn:       #D8A94A;
    --crit:       #E0776A;
    --ok-wash:    rgba(111, 191, 151, .13);
    --warn-wash:  rgba(216, 169, 74, .14);
    --crit-wash:  rgba(224, 119, 106, .13);
  }
}

:root[data-theme="dark"] {
  --paper:      #1A1A17;
  --paper-2:    #232320;
  --paper-3:    #2C2C28;

  --ink:        #EFEFEA;
  --ink-2:      #A9AA9F;
  --ink-3:      #83857A;

  --rule:       #34342F;
  --rule-2:     #45463F;

  --green:      #6FBF97;
  --green-2:    #8FD4B0;
  --green-3:    #4E9B76;
  --green-wash: rgba(111, 191, 151, .12);
  --on-green:   #12211A;

  --ok:         #6FBF97;
  --warn:       #D8A94A;
  --crit:       #E0776A;
  --ok-wash:    rgba(111, 191, 151, .13);
  --warn-wash:  rgba(216, 169, 74, .14);
  --crit-wash:  rgba(224, 119, 106, .13);
}

/* ============================================================
   Base. Everything below is opinion, not just tokens.
   ============================================================ */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-display-l); letter-spacing: -.028em; line-height: 1.04; }
h2 { font-size: var(--t-head-m); }
h3 { font-size: var(--t-head-s); letter-spacing: -.01em; }

p { margin: 0; max-width: var(--measure); }

/* The eyebrow. The only place the sans appears at small sizes. */
.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Numbers always line up. Non-negotiable in a system called Ledger. */
.data, td.num, .metric {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* Square corners everywhere. No exceptions. */
button, input, select, textarea, .card, .badge, img { border-radius: var(--radius); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}