/* ============================================================
   MiddleLeap — design tokens · v1.7.0 · 17 Oct 2026
   Values first captured from middleleap.com on 2026-08-31; Paper
   default since 2026-09-26; Paper whitened and the semantic layer
   added on 2026-10-17 (see CHANGELOG.md).
   Do not hand-edit one copy in isolation: the deck template, the
   reference page and the MiddleLeap Product design system are
   checked against this file (scripts/check-contrast.mjs,
   scripts/check-product-ds.mjs).

   Two surfaces, one token set:
     Paper — light, warm. THE DEFAULT for everything: website,
             product UI, decks, PDFs, documents, print. Applies
             with no attribute (and with data-theme="light").
     Ink   — dark. Opt in with <html data-theme="dark">.

   Three layers:
     1. Primitives  — --ink-*, --bone-*, --paper-*, --paper-text-*,
                      --ember-*, status bases. Private: never author
                      against them in new work.
     2. Remap       — on Paper, --ink-* → --paper-* and --bone-* →
                      --paper-text-*, so older work keeps working.
     3. Semantic    — --surface-*, --text-*, --border-*, --accent-*,
                      --danger-*, --on-*. THE AUTHORING API. The names
                      mean the same thing on both surfaces and in every
                      medium (web, product, deck).

   The surface rule, on both surfaces: the page is the outermost
   step; cards and tiles step away from it (darker on Paper, lighter
   on Ink) and every card carries --border-card. Separation comes
   from the border, never from a shadow.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Ink surface (dark) primitives -------------------------- */
  --ink-0: #080808;
  --ink-1: #101010;
  --ink-2: #181817;
  --ink-3: #232321;
  --ink-4: #33322f;
  --ink-border: #1e1e1c;     /* decorative hairline */
  --ink-edge: #45443f;       /* card edge on Ink: 2.1:1 to the page */

  /* --- Bone (text on Ink) primitives -------------------------- */
  --bone-0: #ece9e1;
  --bone-1: #dedbd4;
  --bone-2: #a8a59e;
  --bone-3: #87847d;
  --bone-4: #4a4945;

  /* --- Paper surface (light) primitives ----------------------- */
  --paper-0: #fcfbf8;        /* warm near-white, never pure white */
  --paper-1: #f5f3ee;
  --paper-2: #eeebe4;
  --paper-3: #e4e0d7;
  --paper-4: #bdb6aa;
  --paper-border: #d4cec2;

  /* --- Text on Paper primitives -------------------------------- */
  --paper-text-0: #1b1b1b;
  --paper-text-1: #2b2925;
  --paper-text-2: #4d4942;
  --paper-text-3: #5f5b54;
  --paper-text-4: #a09a90;

  /* --- Ember (the one accent) ---------------------------------- */
  --ember-300: #f58f55;      /* accent text and link hover on Ink */
  --ember-400: #f0722e;      /* accent text on Ink; primary hover fill */
  --ember-500: #e65c2d;      /* primary fill; Ink focus ring */
  --ember-600: #ce451b;      /* current phase, executed check, Paper focus, checked control on Paper */
  --ember-700: #a83614;      /* accent text and links on Paper */
  --ember-800: #8a2c0e;      /* link hover on Paper */
  --ember-dim: #e65c2d24;    /* ember chip and toggle-on track */
  --ember-grad: linear-gradient(135deg, #f0722e 0%, #ce451b 100%); /* THE MARK AND THE WORD "LEAP" ONLY */
  --on-ember: #110d0a;       /* text on an ember fill */

  /* --- Status bases (never borrow ember) ----------------------- */
  --positive: #5fa671;   --positive-dim: #5fa67124;
  --caution:  #d9a03c;   --caution-dim:  #d9a03c24;
  --info:     #5d8fa6;   --info-dim:     #5d8fa624;
  --critical: #d64545;   --critical-dim: #d6454524;  /* FILLS ONLY */

  /* Status TEXT: pass 4.5:1 on their own -dim tint over every surface
     step up to hover, on both surfaces (the gate checks all of them). */
  --positive-text: #81b98f;
  --caution-text:  #dca84c;
  --info-text:     #87b0c3;
  --critical-text: #ec8a8a;

  /* --- Destructive action -------------------------------------- */
  --danger-btn-bg:    #b83434;   /* 4.84:1 under --on-danger */
  --danger-btn-hover: #a32b2b;   /* 5.89:1 under --on-danger */
  --on-danger:        #ece9e1;   /* the same on both surfaces */

  /* --- Semantic layer: THE AUTHORING API ----------------------- */
  --surface-page:    var(--ink-0);
  --surface-card:    var(--ink-2);
  --surface-tile:    var(--ink-3);   /* tiles, table heads, chips, segmented tracks */
  --surface-field:   var(--ink-1);   /* inputs and search */
  --surface-hover:   var(--ink-4);   /* a step past the tile, so hover shows on tiles too */
  --surface-pressed: var(--ink-4);
  --surface-inverse: var(--bone-1);

  --text-strong:      var(--bone-0); /* headlines, titles, numbers */
  --text-body:        var(--bone-1);
  --text-secondary:   var(--bone-2); /* and ALL text on tiles */
  --text-muted:       var(--bone-3); /* captions on page and card only */
  --text-disabled:    var(--bone-4); /* fails AA by design; never content */
  --text-placeholder: var(--bone-3);
  --text-on-inverse:  #1b1b1b;

  --border-hairline:    var(--ink-border); /* decorative only */
  --border-card:        var(--ink-edge);   /* every card, tile group and table */
  --border-strong:      var(--ink-4);
  --border-control:     var(--bone-3);     /* inputs, segmented, secondary buttons: 3:1 */
  --border-interactive: var(--bone-3);     /* hover edge of a clickable card or row */

  --accent-fill:        var(--ember-500);
  --accent-fill-hover:  var(--ember-400);  /* hover goes LIGHTER: dark label stays AA */
  --accent-mark:        var(--ember-500);  /* current phase, focus series, executed check */
  --accent-text:        var(--ember-400);
  --accent-text-hover:  var(--ember-300);
  --accent-wash:        var(--ember-dim);
  --on-accent:          var(--on-ember);
  --control-checked:    var(--ember-500);
  --accent-on-inverse:  var(--ember-700);

  --danger-fill:        var(--danger-btn-bg);
  --danger-fill-hover:  var(--danger-btn-hover);

  /* Older names kept for existing work */
  --ember-text: var(--accent-text);
  --ember-on-inverse: var(--accent-on-inverse);
  --mark-solid: var(--bone-1);          /* the settled square + "Middle" */

  /* --- Type ---------------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "DM Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-arabic:  "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  --fs-hero: clamp(44px, 6vw, 76px);
  --fs-h1: clamp(32px, 4.4vw, 42px);  --fs-h2: clamp(26px, 3.4vw, 30px);  --fs-h3: 22px;
  --fs-body: 16px; --fs-small: 14px; --fs-caption: 12.5px;
  --fs-ui: 12px;  --fs-ui-small: 11px; --fs-ui-micro: 10px;
  --lh-tight: 1.08; --lh-head: 1.2; --lh-body: 1.6;
  --measure: 68ch;           /* longest line of running text */

  /* --- Space (4px base) ---------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --hit: 44px;               /* minimum target for anything you act on */

  /* --- Radius -------------------------------------------------- */
  --r-ui: 0;        /* buttons, inputs, cards, tables, modals */
  --r-chip: 2px;    /* chips and badges only */
  --r-mark: 16%;    /* pivot glyphs ONLY — logo, checkbox, toggle, loader */

  /* --- Motion: one move, the pivot ----------------------------- */
  --dur-fast: .12s; --dur-base: .2s; --dur-leap: .4s;
  --ease-leap: cubic-bezier(.34, 1.3, .4, 1);
  --ease-out:  cubic-bezier(.2, 0, 0, 1);

  /* --- Interaction --------------------------------------------- */
  --field-border: var(--border-control);
  --focus-ring:   var(--ember-500);  /* 5.66:1 on page, 4.45:1 on tile */

  /* --- Elevation: menus and dialogs only, never cards ---------- */
  --shadow-1: 0 1px 2px #00000080;
  --shadow-2: 0 4px 16px #00000073;
  --shadow-ember: 0 4px 24px #e65c2d47;   /* marketing CTA on middleleap.com only */
}

/* Paper surface — the default. Remap, don't redefine.
   Ink applies only under <html data-theme="dark">. */
:root:not([data-theme="dark"]) {
  color-scheme: light;

  --ink-0: var(--paper-0);
  --ink-1: var(--paper-1);
  --ink-2: var(--paper-2);
  --ink-3: var(--paper-3);
  --ink-4: var(--paper-4);
  --ink-border: var(--paper-border);

  --bone-0: var(--paper-text-0);
  --bone-1: var(--paper-text-1);
  --bone-2: var(--paper-text-2);
  --bone-3: var(--paper-text-3);
  --bone-4: var(--paper-text-4);

  /* Semantic layer on Paper: the page is the lightest step */
  --surface-page:    var(--paper-0);  /* #fcfbf8 */
  --surface-card:    var(--paper-1);  /* #f5f3ee */
  --surface-tile:    var(--paper-2);  /* #eeebe4 */
  --surface-field:   var(--paper-0);
  --surface-hover:   var(--paper-3);
  --surface-pressed: var(--paper-4);
  --surface-inverse: var(--paper-text-0);
  --text-on-inverse: #ece9e1;

  --border-card:        var(--paper-border);
  --border-strong:      var(--paper-4);
  --border-control:     #7c776f;      /* 4.29:1 page, 3.37:1 hover */
  --border-interactive: #7c776f;

  --accent-mark:       var(--ember-600);
  --accent-text:       var(--ember-700); /* 6.34:1 page, 5.51:1 tile */
  --accent-text-hover: var(--ember-800);
  --control-checked:   var(--ember-600); /* 4.22:1 on card; ember-500 is 3.19 */
  --accent-on-inverse: var(--ember-400);

  --positive-text: #2b6742;
  --caution-text:  #795710;
  --info-text:     #335f75;
  --critical-text: #9e2e2e;

  --mark-solid: var(--paper-text-0);     /* #1b1b1b */
  --focus-ring: var(--ember-600);        /* 4.52:1 page, 3.93:1 tile */

  --shadow-1: 0 1px 2px #1b1b1b1f;
  --shadow-2: 0 8px 30px #1b1b1b1f;
  --shadow-ember: 0 4px 24px #e65c2d33;
}

/* Arabic and other right-to-left content */
:lang(ar), [dir="rtl"] { --font-body: var(--font-arabic); --font-display: var(--font-arabic); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur-base: .01ms; --dur-leap: .01ms; }
}