/* ============================================================
   Sam Cherkasov — Design System v2 "Light Jade"
   Tokens: fonts + colour + type + radii + shadows
   Single source of truth. Consume the CSS variables — never hardcode.
   ------------------------------------------------------------
   Identity: light, electric, editorial-technical, Ukrainian-first.
   Replaces the warm-cream / terracotta-forest-ochre v1 palette.
   Type: Fixel Display (headlines) · Fixel Text (body) · Cascadia Mono (labels).
   ============================================================ */

/* ---------- Fonts (self-hosted, full Ukrainian Cyrillic) ---------- */
/* Display — Fixel Display (MacPaw, OFL) */
@font-face{font-family:'Fixel Display';src:url('assets/fonts/FixelDisplay-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('assets/fonts/FixelDisplay-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('assets/fonts/FixelDisplay-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('assets/fonts/FixelDisplay-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
/* Body — Fixel Text (MacPaw, OFL) */
@font-face{font-family:'Fixel Text';src:url('assets/fonts/FixelText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('assets/fonts/FixelText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('assets/fonts/FixelText-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('assets/fonts/FixelText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Mono — Cascadia Mono (Microsoft, OFL) */
@font-face{font-family:'Cascadia Mono';src:url('assets/fonts/CascadiaMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cascadia Mono';src:url('assets/fonts/CascadiaMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cascadia Mono';src:url('assets/fonts/CascadiaMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---------- COLOUR ---------- */
  /* Neutrals — cool paper, never warm cream */
  --lj-paper:       #F5F4F1;  /* page ground */
  --lj-surface:     #FFFFFF;  /* cards */
  --lj-surface-alt: #ECEBE6;  /* alt fill / wells */
  --lj-hairline:    #E4E4DE;  /* borders, dividers */
  --lj-ink:         #14140F;  /* headings, near-black */
  --lj-body:        #44443C;  /* body text */
  --lj-muted:       #6B6B63;  /* labels, secondary */
  --lj-subtle:      #9A9A90;  /* tertiary, captions */

  /* Jade — brand primary */
  --lj-jade:        #0FA98A;  /* bright: large fills, icons, big display accent */
  --lj-jade-deep:   #0A7359;  /* deep: small text, links, kickers, CTA fill (white text) */
  --lj-jade-tint:   #E6F6F0;  /* soft tint background */

  /* Lime — signature "voltage" accent (highlight block only on light) */
  --lj-lime:        #C6FF3A;

  /* Violet — rare pop */
  --lj-violet:      #7C4DED;  /* accents, tags */
  --lj-violet-ink:  #6B3AE0;  /* when carrying white text */

  /* Signal */
  --lj-red:         #F5333F;  /* annotation / error only */

  /* Semantic aliases */
  --lj-brand:       var(--lj-jade-deep);
  --lj-accent:      var(--lj-lime);
  --lj-link:        var(--lj-jade-deep);
  --lj-success:     var(--lj-jade-deep);
  --lj-info:        var(--lj-violet);
  --lj-danger:      var(--lj-red);
  --lj-focus:       var(--lj-jade);

  /* ---------- TYPE ---------- */
  --lj-font-display: 'Fixel Display', 'Fixel', ui-sans-serif, system-ui, sans-serif;
  --lj-font-body:    'Fixel Text', 'Fixel', ui-sans-serif, system-ui, sans-serif;
  --lj-font-mono:    'Cascadia Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --lj-fs-xs:   0.75rem;   /* 12 — mono labels */
  --lj-fs-sm:   0.875rem;  /* 14 */
  --lj-fs-base: 1rem;      /* 16 */
  --lj-fs-md:   1.1875rem; /* 19 — body */
  --lj-fs-lg:   1.5rem;    /* 24 */
  --lj-fs-xl:   2rem;      /* 32 */
  --lj-fs-2xl:  2.75rem;   /* 44 */
  --lj-fs-3xl:  3.75rem;   /* 60 */
  --lj-fs-4xl:  5rem;      /* 80 */

  --lj-lh-tight:  0.98;
  --lj-lh-snug:   1.15;
  --lj-lh-normal: 1.55;

  --lj-track-tight: -0.028em; /* display */
  --lj-track-caps:  0.14em;   /* mono eyebrows */

  /* ---------- RADII (mixed by component type) ---------- */
  --lj-radius-sm:   6px;   /* highlight blocks, small chips */
  --lj-radius-chip: 8px;   /* tags, code chips, inputs */
  --lj-radius-card: 14px;  /* cards, images */
  --lj-radius-lg:   18px;  /* large panels */
  --lj-radius-pill: 999px; /* buttons, pills */

  /* ---------- SHADOWS (soft, cool-tinted — never black, never warm) ---------- */
  --lj-shadow-xs: 0 1px 2px rgba(18,30,25,0.05);
  --lj-shadow-sm: 0 2px 8px rgba(18,30,25,0.06), 0 1px 2px rgba(18,30,25,0.04);
  --lj-shadow-md: 0 12px 30px rgba(18,30,25,0.08), 0 2px 6px rgba(18,30,25,0.05);
  --lj-shadow-lg: 0 22px 50px rgba(18,30,25,0.10), 0 6px 14px rgba(18,30,25,0.06);

  /* ---------- MOTION ---------- */
  --lj-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lj-dur:  180ms;
}