/* ============================================================================
   Ownfri - Blueprint design tokens (single source of truth)
   ----------------------------------------------------------------------------
   Every page links this file. Do not hardcode hex in component CSS - reference
   the variables below. The "compatibility aliases" block maps the old warm
   palette token names (--cream, --green, --suit, …) onto Blueprint values so
   existing component CSS inherits the new system without a full rewrite.

   Colours
     Ink        #102A43  primary dark · body text · dark sections
     Ink deep   #0B2236  footers / deepest panels
     Blueprint  #2D6CA4  links, rules, secondary structure
     Bone       #EDF1F5  light background (a COOL off-white - never warm cream)
     Signal     #EC7524  accent: CTAs, key marks, win states ONLY

   Type
     Display    Archivo (700/800)        - headings
     Body/UI    Inter                    - everything else
     Data/mono  JetBrains Mono           - receipts, stats, technical bits
   Sentence case throughout.
   ============================================================================ */

:root {
  /* --- Blueprint core palette --- */
  --ink:        #102A43;
  --ink-deep:   #0B2236;
  --blue:       #2D6CA4;
  --bone:       #EDF1F5;
  --signal:     #EC7524;
  --signal-dk:  #D8651A;

  /* Ink at opacity - text/rules on Bone */
  --ink-72:  rgba(16, 42, 67, .72);
  --ink-62:  rgba(16, 42, 67, .62);
  --ink-50:  rgba(16, 42, 67, .50);
  --ink-20:  rgba(16, 42, 67, .20);
  --ink-12:  rgba(16, 42, 67, .12);

  /* Bone at opacity - text/rules on Ink */
  --bone-74: rgba(237, 241, 245, .74);
  --bone-50: rgba(237, 241, 245, .50);
  --bone-42: rgba(237, 241, 245, .42);
  --bone-14: rgba(237, 241, 245, .14);

  /* Signal tint - selected states, faint fills */
  --signal-12: rgba(236, 117, 36, .12);

  /* Drafting-grid texture - subliminal, dark (Ink) sections only */
  --grid: rgba(96, 156, 206, .13);

  /* Surfaces */
  --card: #ffffff;   /* raised light surface on Bone */

  /* --- Type --- */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--display);   /* legacy alias */
  --font-body:    var(--sans);      /* legacy alias */

  /* --- Layout (unchanged from existing pages) --- */
  --maxw:   1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ==========================================================================
     COMPATIBILITY ALIASES - old warm token names → Blueprint values.
     These let existing component CSS keep working while pointing at the new
     palette. New code should use the core tokens above, not these.
     ========================================================================== */
  --cream:       var(--bone);      /* page background */
  --cream-2:     #ffffff;          /* faint raised surface */
  --cream-dim:   var(--bone-74);
  --paper:       #ffffff;          /* card / panel */
  /* --ink already defined above as Blueprint Ink (was #1A120E) */
  --ink-2:       var(--ink-72);
  --ink-3:       var(--ink-62);
  --line:        var(--ink-12);
  --green:       var(--signal);    /* win / primary action → Signal */
  --green-bright:var(--signal-dk);
  --amber:       var(--blue);      /* secondary accent → structural blue */
  --suit:        var(--signal);    /* clay accent → Signal */

  /* journey-ladder spectrum (index.html): burn → free.
     Win end = Signal; structural/intermediate = blue/ink. */
  --c-burn: var(--ink);
  --c-warm: var(--blue);
  --c-mid:  var(--blue);
  --c-free: var(--signal);
}

/* ============================================================================
   Base guarantees - small invariants that ride on top of page CSS.
   ============================================================================ */

/* A solid CTA is always white on Signal. !important beats page-level nav-link
   colours (e.g. `.nav-links a{color:var(--ink-2)}`) that would otherwise tint
   the button text and fail contrast. Solid buttons are Signal-filled by design,
   so white is always the correct, high-contrast choice. */
.btn--solid { color: #fff !important; }

/* Visible keyboard focus everywhere - a Signal ring that clears the element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2.5px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Subliminal drafting-grid texture - dark (Ink) sections only. Add the class to
   any Ink/Ink-deep panel; it layers a faint blueprint grid over the fill while
   keeping the element's own background-color. !important is needed because this
   file loads before the pages' own `background:` shorthands, which would
   otherwise reset background-image/size back to none/auto. */
.bp-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important;
  background-size: 38px 38px !important;
}