/* ============================================
   Itqaan Solutions — Design Tokens
   "One Sheet, Folded"  ·  seed 3ed6a8e2
   ============================================
   The world is a single square of vermilion washi folded into a form. The
   ground is SATURATED, not pale: vermilion owns the surface, fold-white is a
   minority reading stock. Inverting that ratio re-ships the previous design.

   Every colour below is measured against WCAG AA at the size it is used.
   The ratios in comments are computed, not aspirational.
   ============================================ */

:root {
  /* ── The sheet ────────────────────────────────────────────────────────────
     --vermilion       page-scale ground; display type only sits ON it
     --vermilion-deep  ground for regions carrying BODY copy (6.31:1 w/ white)
     --vermilion-text  vermilion at body size on a light stock (6.31:1)
     --vermilion-lit   vermilion at body size on sumi          (6.78:1)
     --vermilion-wash  tint / fill only. Never type. */
  --vermilion:       #D83C2E;
  --vermilion-deep:  #A82A1C;
  --vermilion-text:  #A82A1C;
  --vermilion-lit:   #F0836E;
  --vermilion-wash:  #E07A6E;
  --vermilion-tint:  rgba(216, 60, 46, 0.10);

  /* Stocks. Fold-white is the paper the sheet was cut from. */
  --fold-white:  #F7F3EE;
  --paper-grey:  #E6E2DA;
  --sumi:        #1A1A1A;

  /* ── The gold dot ─────────────────────────────────────────────────────────
     Marks the active step and the one crease a human must make. It is a MARK,
     never type: 2.17:1 on vermilion, 1.90:1 on fold-white. Both fail text.
     --gold-text is the only gold allowed to carry words (4.71:1 on fold-white). */
  --gold:       #D4AF37;
  --gold-text:  #8A6718;
  --gold-tint:  rgba(212, 175, 55, 0.16);

  /* ── Ink ladders ──────────────────────────────────────────────────────────
     Deliberately NOT named --ink-* / --paper-*: those names belong to the
     previous world and are still consumed by main.css, apply.css, roadmap.css
     and admin.css, where --ink is the light page ground. Redefining them here
     would repaint five untouched pages. The legacy block at the end of this
     file keeps their old meaning.

     On light stock. --sumi-muted is the lowest that still carries type (5.02:1);
     --sumi-faint is non-text only: creases, rules, decorative marks. */
  --sumi-dim:     rgba(26, 26, 26, 0.82);
  --sumi-muted:   rgba(26, 26, 26, 0.64);   /* 5.02:1 on fold-white */
  --sumi-faint:   rgba(26, 26, 26, 0.34);   /* non-text only */
  --sumi-ghost:   rgba(26, 26, 26, 0.06);

  /* On sumi and vermilion grounds. MEASURED, and the two grounds differ:
       on --sumi           .72 holds 8.62:1 — safe for any text
       on --vermilion-deep .72 falls to 3.97:1 — FAILS body. Use --light-muted-red
       on --vermilion (full strength)  4.13:1 — display sizes ONLY, never dimmed */
  --light-dim:       rgba(247, 243, 238, 0.86);  /* sumi only: 12.9:1 */
  --light-muted:     rgba(247, 243, 238, 0.72);  /* sumi only: 8.62:1 */
  --light-muted-red: rgba(247, 243, 238, 0.82);  /* on --vermilion-deep: 4.71:1 */
  --light-faint:     rgba(247, 243, 238, 0.38);  /* non-text: creases on vermilion */
  --light-ghost:     rgba(247, 243, 238, 0.12);

  /* ── Crease lines ─────────────────────────────────────────────────────────
     A crease is the structural mark of this world. It replaces the hairline
     border of the previous system and the box outline of a card. */
  --crease-on-light:  rgba(26, 26, 26, 0.14);
  --crease-on-dark:   rgba(247, 243, 238, 0.26);
  --crease-strong:    rgba(26, 26, 26, 0.30);
  --crease-gold:      rgba(212, 175, 55, 0.55);

  /* ── Semantic: what the system did vs. what waits for a person ────────────
     The gold crease is the human gate. Automatic steps are quiet. */
  /* No green. This world has five hues and green is not one of them; the tags
     that used it are labels, not semantic states, so they take the world's own
     ink instead of importing a sixth colour. */
  --auto:        var(--vermilion-text);        /* 6.31:1 on fold-white */
  --auto-lit:    var(--light-muted);           /* 8.62:1 on sumi */
  --auto-tint:   var(--vermilion-tint);
  --hold:        var(--gold-text);             /* awaiting human approval */
  --hold-lit:    var(--gold);                  /* the mark, on dark only */
  --hold-tint:   var(--gold-tint);

  /* Errors — split by ground; no single red clears 4.5:1 on both */
  --error:         #A32218;                    /* on fold-white  (6.6:1) */
  --error-on-dark: #F0836E;                    /* on sumi        (6.78:1) */

  /* ── Surfaces ─────────────────────────────────────────────────────────────
     Not cards. These are stocks a region is printed on. */
  --stock-light:  var(--fold-white);
  --stock-grey:   var(--paper-grey);
  --stock-dark:   var(--sumi);
  --stock-red:    var(--vermilion);
  --stock-red-lo: var(--vermilion-deep);

  /* ── Fibre ────────────────────────────────────────────────────────────────
     Kozo fibre is what makes washi washi. Rendered as fractal noise over the
     ground; opacity differs by stock because the fibre reads darker on red. */
  --fibre-on-red:   0.16;
  --fibre-on-light: 0.05;

  /* ── Typography ───────────────────────────────────────────────────────────
     Jost carries the display voice: Futura-lineage geometric, the tradition
     fold diagrams are actually set in, run light and widely tracked in caps.
     Hanken Grotesk stays the reading face. Spline Sans Mono stays the
     instrument voice: step indices, tags, every numeric column. */
  --font-display: 'Jost', 'Hanken Grotesk', -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale */
  --text-3xs: 0.8125rem;  /* 13px — hard floor, mono tags only */
  --text-2xs: 0.875rem;   /* 14px */
  --text-xs:  1rem;       /* 16px */
  --text-sm:  1.1875rem;  /* 19px — body-on-vermilion floor */
  --text-base:1.375rem;   /* 22px */
  --text-lg:  1.75rem;    /* 28px */
  --text-xl:  2rem;       /* 32px */
  --text-2xl: 2.75rem;    /* 44px */
  --text-3xl: 3.75rem;    /* 60px */
  --text-4xl: 5rem;       /* 80px */
  --text-5xl: 6.5rem;     /* 104px */

  /* Spacing */
  --sp-2xs: 0.375rem;
  --sp-xs:  0.625rem;
  --sp-sm:  1rem;
  --sp-md:  1.75rem;
  --sp-lg:  2.75rem;
  --sp-xl:  4.5rem;
  --sp-2xl: 7rem;
  --sp-3xl: 10rem;

  /* Layout */
  --max-w:        1280px;
  --max-w-narrow: 680px;
  --pad-x:        clamp(1.25rem, 4vw, 4.5rem);

  /* Radius — paper does not round. A fold is a straight line. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 9999px;

  /* Shadow — a folded sheet lifts off the table at its edge, nothing more. */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.10);
  --shadow-md: 0 10px 30px rgba(26, 26, 26, 0.14);

  /* ── Motion: the fold ─────────────────────────────────────────────────────
     A fold accelerates, then CATCHES. It does not ease out gently and it does
     not bounce. --ease-fold is the world's signature curve; --ease is kept for
     colour and border feedback, which should stay soft. */
  --ease-fold:  cubic-bezier(0.70, 0.00, 0.10, 1.00);
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   180ms;
  --dur-base:   340ms;
  --dur-fold:   520ms;
  --dur-slow:   760ms;

  /* Z */
  --z-nav:   100;
  --z-modal: 200;

  /* ── Legacy aliases ───────────────────────────────────────────────────────
     Consumed by apply.css, roadmap.css, admin.css and the pages not yet
     rebuilt in this world. Aliases only — no raw hex — so the world reaches
     every page through one file. Delete as consumers migrate. */
  /* Light-stock roles. --ink stays the LIGHT ground and --paper the DARK ink,
     exactly as the previous world defined them: main.css line 11 paints the
     page with var(--ink), and five pages still run on it. */
  --ink:            var(--fold-white);
  --ink-2:          var(--paper-grey);
  --ink-3:          #DDD7CB;
  --paper:          var(--sumi);
  --paper-dim:      var(--sumi-dim);
  --paper-muted:    var(--sumi-muted);
  --paper-faint:    var(--sumi-faint);
  --paper-ghost:    var(--sumi-ghost);
  --paper-ghost2:   rgba(26, 26, 26, 0.03);
  --bg-warm:        var(--paper-grey);
  --bg-cream:       var(--fold-white);
  --text-primary:   var(--sumi);
  --text-secondary: var(--sumi-dim);
  --accent-primary: var(--vermilion);
  --accent-dark:    var(--vermilion-text);
  --accent-subtle:  var(--vermilion-tint);
  --border-default: var(--crease-on-light);
  --border-accent:  var(--crease-gold);
  --rule:           var(--crease-on-light);
  --rule-strong:    var(--crease-strong);
  --rule-accent:    var(--crease-gold);

  /* Dark-stock roles — these paint onto sumi or vermilion and must resolve to
     LIGHT values. --text-muted is the misnomer of the set: it is always on
     dark. Pointing these at --paper-* is the trap: --paper-muted is dark ink
     for light stock, so it renders these invisible on the pages that use them
     (get-roadmap, apply, login, dashboard). They take the --light-* ladder. */
  --bg-primary:   var(--sumi);
  --text-muted:   var(--light-muted);     /* 8.62:1 on sumi */
  --text-light:   var(--fold-white);
  --text-cream:   var(--fold-white);
  --accent-light: var(--vermilion-lit);
  --border-light: var(--light-ghost);

  /* Previous world's rust family, remapped so untouched pages stay coherent */
  --rust:            var(--vermilion);
  --rust-dim:        var(--vermilion-tint);
  --rust-bright:     var(--vermilion-text);
  --rust-text:       var(--vermilion-text);
  --rust-fill:       var(--vermilion-deep);
  --rust-fill-hover: #8E2115;
  --rust-on-dark:    var(--vermilion-lit);
  --gold-legacy:     var(--gold-text);
  --sage:            var(--auto);
  --verified:        var(--auto);
  --verified-dim:    var(--auto-tint);
  --flag:            var(--hold);
  --flag-dim:        var(--hold-tint);
  --card:            var(--fold-white);
  --panel-in:        var(--paper-grey);
  --panel-out:       var(--fold-white);

  /* Non-colour aliases */
  --font-family:   var(--font-body);
  --font-size-xs:  var(--text-2xs);
  --font-size-sm:  var(--text-xs);
  --font-size-base:var(--text-sm);
  --font-size-md:  var(--text-base);
  --font-size-lg:  var(--text-lg);
  --font-size-xl:  var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-5xl: var(--text-5xl);
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.04;
  --line-height-snug:      1.22;
  --line-height-normal:    1.6;
  --line-height-relaxed:   1.75;
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-snug:   -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.14em;
  --space-xs:   var(--sp-2xs);
  --space-sm:   var(--sp-xs);
  --space-md:   var(--sp-sm);
  --space-lg:   var(--sp-md);
  --space-xl:   var(--sp-lg);
  --space-2xl:  var(--sp-xl);
  --space-3xl:  var(--sp-2xl);
  --space-4xl:  var(--sp-3xl);
  --space-5xl:  12rem;
  --container-max: var(--max-w);
  --container-narrow: var(--max-w-narrow);
  --section-padding: var(--sp-2xl) var(--pad-x);
  --radius-xl: 0;
  --shadow-xl: 0 20px 48px rgba(26, 26, 26, 0.20);
  /* Aliases, like the rest of this block: the world's curve, not a second one.
     Two buttons on one screen must not answer a press on two easings. */
  --transition-fast: var(--dur-fast) var(--ease);
  --transition-base: var(--dur-base) var(--ease);
  --z-overlay: 90;
}