/* ============================================================================
   JOHNICORN — DESIGN TOKENS  ·  tokens.css
   The single source of truth. Plain CSS custom properties, zero build.
   Brand: Jānis Patmalnieks / Johnicorn — data structuring & visualisation.
   Aesthetic: industrial brutalism — black · white · orange, technical/boarding-
   pass motifs, razor-sharp 0px corners, monospace data, info-tight density.

   TWO TIERS:
     LOCKED CORE  — identity. Never override per page. (logo, colour-coding,
                    type families, sharp corners, semantic meaning.)
     SKIN DEFAULTS — per-page reinvention is allowed. (spacing, grid rhythm,
                    elevation, motion, decorative texture.)

   Consume this file directly (plain CSS / inline SVG var()), via theme.css
   (Astro + Tailwind v4), or via tokens.json (JS charts). Pages REFERENCE these
   tokens — they never hardcode colours or sizes.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SELF-HOSTED FONTS (version-locked, offline-safe)
   DM Sans = display + body (optical size + full weight range incl. Black).
   JetBrains Mono = mono / data / technical labels.
   Latin-Extended subsets carry full Latvian coverage incl. comma-below ģ ķ ļ ņ.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: normal;
  font-display: swap;
  src: url("fonts/dmsans-v17-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: normal;
  font-display: swap;
  src: url("fonts/dmsans-v17-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-v24-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-v24-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* =========================================================================
     ███  LOCKED CORE — never override per page  ███
     ========================================================================= */

  /* --- COLOUR · foundations (neutrals + concrete) ----------------------- */
  --jc-black:        #000000;  /* brutalist frame / hard shadow              */
  --jc-ink:          #0C0C0E;  /* primary text on light                      */
  --jc-paper:        #FFFFFF;  /* base surface                              */
  --jc-concrete-50:  #F3F1EC;  /* off-white concrete                        */
  --jc-concrete-100: #E7E4DE;  /* light concrete (page wash)                */
  --jc-concrete-200: #D4D0C8;  /* concrete fill                             */
  --jc-concrete-300: #B7B2A8;  /* mid concrete (board ground)               */
  --jc-concrete-400: #8B867C;  /* dark concrete                             */
  --jc-slate:        #3A4452;  /* body text                                 */
  --jc-muted:        #697180;  /* secondary text                            */
  --jc-line:         #D7DADE;  /* hairline border                           */

  /* --- COLOUR · brand accent (THE signal colour) ------------------------ */
  --jc-orange:        #E07A2F; /* primary brand accent — "look here"        */
  --jc-orange-deep:   #B5611F; /* orange text on white / pressed            */
  --jc-orange-bright: #F3923F; /* orange on dark ground                     */

  /* --- COLOUR · secondary data + accent (disciplined, not a rainbow) ----
     Orange leads; dark-red and light-blue are the only other hues.
     Each carries a deep variant (legible on white) + bright variant (on dark). */
  --jc-red:        #C0392B;    /* dark red — negative / critical / "hot"     */
  --jc-red-deep:   #8E2018;    /* deepest red (fills, text on light)        */
  --jc-red-bright: #E25C4A;    /* red on dark ground                        */
  --jc-blue:       #5BA3DC;    /* light blue — info / cool / sky / "cold"    */
  --jc-blue-deep:  #2C6FB0;    /* blue text/marks on white                  */
  --jc-blue-bright:#7FBEEC;    /* blue on dark ground                       */
  --jc-green:       #2F7D4F;   /* pine green — positive / "pines" (sunset)   */
  --jc-green-deep:  #1F6E3A;   /* green text on white                       */
  --jc-green-bright:#46C26E;   /* green on dark ground                      */

  /* --- COLOUR · semantic coding (LOCKED meaning) ------------------------
     Colour NEVER stands alone for +/− — always pair with an arrow or label. */
  --jc-positive:  #2F7D4F;     /* up / good → pine green                    */
  --jc-positive-ink:#1F6E3A;   /* positive as small text on light (legible) */
  --jc-negative:  #C0392B;     /* down / loss / error → red                 */
  --jc-info:      #5BA3DC;     /* informational / neutral-cool → blue       */
  --jc-neutral:   #697180;     /* baseline / no-change → muted              */
  --jc-highlight: #E07A2F;     /* attention / current → orange              */
  /* Temperature coding (personas, intensity) — preserved from canon */
  --jc-temp-hot:  #C0392B;
  --jc-temp-warm: #E07A2F;
  --jc-temp-cold: #5BA3DC;

  /* Trust-ledger states (LOCKED — the "double-ultra" verification signature).
     Research-truth made visible: every claim carries its verification state.
     Maps onto the locked semantic hues — NO new colours. */
  --jc-trust-confirmed:  #2F7D4F;  /* cross-verified → green (good)          */
  --jc-trust-contested:  #E07A2F;  /* sources disagree → orange (look here)  */
  --jc-trust-unverified: #697180;  /* not yet checked → muted neutral        */
  --jc-trust-refuted:    #C0392B;  /* failed verification → red              */

  /* --- COLOUR · data-viz scales (LOCKED) --------------------------------- */
  /* Categorical — accent-led, max 5. Beyond this DO NOT add hues: encode
     series by direct label + position + pattern/hatching (brand law). */
  --jc-cat-1: #E07A2F;  /* orange — sun    */
  --jc-cat-2: #5BA3DC;  /* blue — sky/sea  */
  --jc-cat-3: #2F7D4F;  /* green — pines   */
  --jc-cat-4: #C0392B;  /* red — alert     */
  --jc-cat-5: #3A4452;  /* slate — neutral */

  /* Sequential — single-hue orange, light → dark (7 steps) */
  --jc-seq-1: #FBEAD7;
  --jc-seq-2: #F6C99A;
  --jc-seq-3: #EFA45F;
  --jc-seq-4: #E07A2F;
  --jc-seq-5: #B5611F;
  --jc-seq-6: #8A4717;
  --jc-seq-7: #5A2D0C;

  /* Diverging — blue (−) ↔ neutral ↔ orange (+), 7 steps, colour-blind-safe */
  --jc-div-1: #2C6FB0;  /* strongest negative */
  --jc-div-2: #5BA3DC;
  --jc-div-3: #A9CBE6;
  --jc-div-4: #ECEAE6;  /* neutral midpoint   */
  --jc-div-5: #F3B985;
  --jc-div-6: #E58A3E;
  --jc-div-7: #B5611F;  /* strongest positive */

  /* --- TYPOGRAPHY · families (LOCKED identity) --------------------------- */
  --jc-font-display: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --jc-font-body:    "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --jc-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --jc-tabular: tabular-nums;  /* font-variant-numeric for aligned figures */

  /* --- TYPOGRAPHY · modular scale (LOCKED) ------------------------------
     Each step: size / line-height / letter-spacing / weight.
     Identity comes from WEIGHT CONTRAST — Black/ExtraBold display vs Regular body. */
  --jc-display-size: 4.25rem; --jc-display-lh: 0.9;  --jc-display-ls: -0.03em; --jc-display-weight: 900;
  --jc-h1-size:      2.75rem; --jc-h1-lh:      0.96; --jc-h1-ls:      -0.02em; --jc-h1-weight:      800;
  --jc-h2-size:      1.875rem;--jc-h2-lh:      1.0;  --jc-h2-ls:      -0.01em; --jc-h2-weight:      800;
  --jc-h3-size:      1.25rem; --jc-h3-lh:      1.12; --jc-h3-ls:      0;       --jc-h3-weight:      700;
  --jc-body-lg-size: 1.0625rem;--jc-body-lg-lh:1.55; --jc-body-lg-ls: 0;       --jc-body-lg-weight: 400;
  --jc-body-size:    0.875rem;--jc-body-lh:    1.55; --jc-body-ls:    0;       --jc-body-weight:    400;
  --jc-small-size:   0.8125rem;--jc-small-lh:  1.5;  --jc-small-ls:   0;       --jc-small-weight:   400;
  --jc-caption-size: 0.79rem;--jc-caption-lh:1.4;  --jc-caption-ls: 0.13em;  --jc-caption-weight: 600;
  /* Kicker / eyebrow — wide-tracked uppercase label */
  --jc-kicker-size:  0.79rem;--jc-kicker-lh: 1.3;  --jc-kicker-ls:  0.22em;  --jc-kicker-weight:  600;

  /* --- TYPOGRAPHY · data-viz roles (LOCKED) ----------------------------- */
  --jc-chart-title-size: 0.8125rem; --jc-chart-title-ls: 0.04em; --jc-chart-title-weight: 700; /* display, uppercase */
  --jc-axis-label-size:  0.79rem; --jc-axis-label-ls:  0.06em; --jc-axis-label-weight:  600; /* mono, uppercase   */
  --jc-tick-label-size:  0.79rem; --jc-tick-label-weight: 500;                               /* mono, tabular     */
  --jc-annotation-size:  0.75rem;                                                              /* body italic       */
  --jc-data-label-size:  0.75rem;  --jc-data-label-weight: 600;                                /* mono, tabular     */
  --jc-source-size:      0.79rem;                                                            /* italic, muted     */

  /* --- LOGO treatment (LOCKED) ------------------------------------------ */
  --jc-logo-mark: url("logo/johnicorn-mark.svg"); /* unicorn head, single path */
  --jc-logo-ratio: 1.414;        /* viewBox 841.89 × 595.28 ≈ 1.414 : 1       */
  --jc-logo-min-width: 40px;     /* never render the mark smaller             */
  --jc-logo-clearspace: 0.5;     /* clear margin = 0.5 × mark height          */
  --jc-logo-on-light: var(--jc-ink);     /* mark fill on light ground         */
  --jc-logo-on-dark:  var(--jc-paper);   /* mark fill on dark ground          */
  --jc-logo-brand:    var(--jc-orange);  /* mark fill, brand orange treatment */
  --jc-wordmark-weight: 900;     /* "JOHNICORN" = DM Sans Black, uppercase    */
  --jc-wordmark-ls: 0.02em;

  /* --- SHAPE (LOCKED) — razor-sharp, no rounding, ever ------------------- */
  --jc-radius: 0;

  /* =========================================================================
     ░░░  SKIN DEFAULTS — may be overridden per page  ░░░
     ========================================================================= */

  /* --- SPACING scale (rem) ---------------------------------------------- */
  --jc-space-1: 0.25rem;   /*  4 */
  --jc-space-2: 0.5rem;    /*  8 */
  --jc-space-3: 0.75rem;   /* 12 */
  --jc-space-4: 1rem;      /* 16 */
  --jc-space-5: 1.375rem;  /* 22 — page gutter            */
  --jc-space-6: 2rem;      /* 32 */
  --jc-space-7: 2.875rem;  /* 46 — section rhythm         */
  --jc-space-8: 4rem;      /* 64 */
  --jc-space-9: 5rem;      /* 80 */

  /* --- STRUCTURAL GRID (info-tight skeleton — documented invariant) ----- */
  --jc-max-width: 1200px;
  --jc-gutter:    1.375rem; /* 22px */
  --jc-columns:   12;
  --jc-grid-gap:  1rem;     /* 16px (10px on small screens) */
  --jc-bp-sm: 560px;
  --jc-bp-md: 880px;
  --jc-bp-lg: 1120px;

  /* --- BORDERS (brutalist weights) -------------------------------------- */
  --jc-border-hair: 1px;
  --jc-border:      2px;
  --jc-border-bold: 3px;
  --jc-frame:       5px;   /* masthead rule / heavy frame */
  --jc-border-color: var(--jc-ink);

  /* --- ELEVATION (hard offset shadows — no soft blur) ------------------- */
  --jc-shadow-none:    none;
  --jc-shadow-hard-sm: 2px 2px 0 0 var(--jc-ink);
  --jc-shadow-hard:    4px 4px 0 0 var(--jc-ink);
  --jc-shadow-hard-lg: 8px 8px 0 0 var(--jc-ink);
  --jc-shadow-orange:  4px 4px 0 0 var(--jc-orange);

  /* --- MOTION (GSAP-friendly) ------------------------------------------- */
  --jc-dur-fast: 120ms;
  --jc-dur-base: 220ms;
  --jc-dur-slow: 600ms;
  --jc-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);   /* entering            */
  --jc-ease-in:  cubic-bezier(0.5, 0, 0.8, 0.3);   /* exiting             */
  --jc-ease-std: cubic-bezier(0.4, 0, 0.2, 1);     /* standard            */

  /* --- DECORATIVE ACCENTS (industrial texture) -------------------------- */
  --jc-dot-grid: radial-gradient(var(--jc-ink) 0.6px, transparent 0.6px);
  --jc-dot-size: 24px 24px;
  --jc-page-wash: linear-gradient(180deg, var(--jc-concrete-50), var(--jc-concrete-100));
  --jc-crosshair: 14px;  /* registration-mark arm length */
}