/* =============================================================================
   JEFF JENX · DESIGN TOKENS · v1.0
   [JJ] Jeff Jenx · jeffjenx.com
   
   Usage: Link this file first, before any other stylesheet.
   Compatible: Every browser that supports CSS custom properties (2016+).
   Fallback:   All values also expressed as plain CSS where possible for
               browsers that predate custom property support.
   ============================================================================= */


/* =============================================================================
   LAYER 0 · CUSTOM PROPERTY DEFINITIONS
   Defined on :root. Available to every element in every browser context.
   ============================================================================= */

:root {

  /* --- COLOR · BASE PALETTE ----------------------------------------------- */
  /* JJ monochrome scale — named by role, not by value */
  --jj-black:        #0a0a0a;  /* primary foreground, mark fill (light) */
  --jj-ink:          #1a1a1a;  /* elevated surface (dark mode) */
  --jj-charcoal:     #2a2a2a;  /* secondary surface (dark mode) */
  --jj-border:       #3a3a3a;  /* borders, dividers */
  --jj-muted:        #888888;  /* placeholder, disabled, meta text */
  --jj-silver:       #c8c8c8;  /* mid-tone, secondary borders (light mode) */
  --jj-smoke:        #e8e8e8;  /* subtle surface (light mode) */
  --jj-white:        #f8f8f8;  /* primary foreground (dark), mark fill (dark) */

  /* --- COLOR · SEMANTIC ROLES (light mode default) ------------------------- */
  --jj-bg:           var(--jj-white);     /* page background */
  --jj-bg-raised:    #ffffff;             /* card, modal surface */
  --jj-bg-sunken:    var(--jj-smoke);     /* input, code block background */
  --jj-fg:           var(--jj-black);     /* primary text, mark fill */
  --jj-fg-muted:     #555555;             /* secondary text */
  --jj-fg-subtle:    var(--jj-muted);     /* tertiary text, placeholders */
  --jj-border-color: var(--jj-silver);    /* default border */
  --jj-border-strong:#999999;             /* emphasized border */

  /* --- COLOR · CATEGORY ACCENTS ------------------------------------------- */
  /* Each accent is the real-world hardware/brand color, desaturated slightly  */
  /* for screen readability while remaining immediately recognizable.          */

  --jj-accent-default:  var(--jj-fg);  /* no category — base brand */

  /* GB Indigo · Game Boy housing tint, screen glow purple */
  --jj-accent-gb:       #7B5EA7;
  --jj-accent-gb-light: #ede9f8;          /* bg tint for badges, pills */
  --jj-accent-gb-dark:  #5a4180;          /* hover, pressed state */

  /* NES Red · Famicom cartridge label maroon */
  --jj-accent-nes:      #9B1C1C;
  --jj-accent-nes-light:#fce8e8;
  --jj-accent-nes-dark: #7a1515;

  /* XBX Green · Microsoft Xbox green */
  --jj-accent-xbx:     #107C10;
  --jj-accent-xbx-light:#e6f4e6;
  --jj-accent-xbx-dark: #0a5e0a;

  /* PS Blue · Sony PlayStation blue */
  --jj-accent-ps:       #003791;
  --jj-accent-ps-light: #e5f0fa;
  --jj-accent-ps-dark:  #00215e;

  /* IBM Blue · Web / Consulting */
  --jj-accent-web:      #0066CC;
  --jj-accent-web-light:#e5f0fa;
  --jj-accent-web-dark: #004f9e;

  /* General Shop · JJ Gold, neutral premium */
  --jj-accent-shop:    #C0A060;
  --jj-accent-shop-light:#faf4e5;
  --jj-accent-shop-dark: #9a7d44;

  /* Active accent — override per page/section via closest ancestor */
  --jj-accent:          var(--jj-accent-default);
  --jj-accent-light:    var(--jj-bg-sunken);
  --jj-accent-dark:     var(--jj-charcoal);

  /* --- TYPOGRAPHY · FAMILIES ---------------------------------------------- */
  --jj-font-mono:
    "IBM Plex Mono",
    "Courier New",          /* Layer 3 fallback: pre-CSS-variable browsers */
    "Lucida Console",       /* Layer 2 fallback: Windows legacy */
    monospace;              /* Layer 1 fallback: any monospace available */

  --jj-font-sans:
    "IBM Plex Sans",
    system-ui,              /* Layer 3: modern OS system font */
    -apple-system,          /* Layer 2: macOS/iOS */
    "Segoe UI",             /* Layer 2: Windows */
    Helvetica,              /* Layer 1: classic print */
    Arial,                  /* Layer 0: guaranteed available */
    sans-serif;

  --jj-font-display: var(--jj-font-mono); /* wordmark, headings */
  --jj-font-body:    var(--jj-font-sans);  /* long-form prose */
  --jj-font-code:    var(--jj-font-mono);  /* inline code, snippets */

  /* --- TYPOGRAPHY · SCALE (Major Third — 1.250 ratio) --------------------- */
  /* Each step is prev × 1.250, rounded to nearest 0.5px for pixel grids.    */
  /* The scale also maps cleanly to bitmap tile sizes at the low end.         */
  --jj-text-2xs:   0.512rem;   /*  ~8px  — bitmap tile, favicon label  */
  --jj-text-xs:    0.640rem;   /* ~10px  — legal, micro labels          */
  --jj-text-sm:    0.800rem;   /* ~13px  — secondary UI, captions       */
  --jj-text-base:  1.000rem;   /* ~16px  — body text baseline           */
  --jj-text-md:    1.250rem;   /* ~20px  — lead text, card titles       */
  --jj-text-lg:    1.563rem;   /* ~25px  — section headings             */
  --jj-text-xl:    1.953rem;   /* ~31px  — page headings                */
  --jj-text-2xl:   2.441rem;   /* ~39px  — hero headings                */
  --jj-text-3xl:   3.052rem;   /* ~49px  — display, wordmark            */
  --jj-text-4xl:   3.815rem;   /* ~61px  — large display                */

  /* --- TYPOGRAPHY · WEIGHTS ----------------------------------------------- */
  --jj-weight-regular: 400;
  --jj-weight-medium:  500;
  /* No 700 bold. Two weights only. */

  /* --- TYPOGRAPHY · LINE HEIGHTS ------------------------------------------ */
  --jj-leading-tight:  1.2;   /* headings, display type */
  --jj-leading-snug:   1.4;   /* UI labels, buttons */
  --jj-leading-normal: 1.6;   /* body text default */
  --jj-leading-loose:  1.8;   /* long-form prose, articles */

  /* --- TYPOGRAPHY · TRACKING (letter-spacing) ----------------------------- */
  --jj-tracking-tight:  -0.03em;  /* large display headings */
  --jj-tracking-normal:  0;
  --jj-tracking-wide:    0.06em;  /* small caps, labels, tags */
  --jj-tracking-wider:   0.12em;  /* category labels, mono caps */
  --jj-tracking-widest:  0.18em;  /* section dividers */

  /* --- TYPOGRAPHY · OPENTYPE FEATURES ------------------------------------- */
  --jj-features-default:   "kern" 1, "liga" 1;
  --jj-features-tabular:   "kern" 1, "tnum" 1, "lnum" 1; /* prices, stats */
  --jj-features-mono-alt:  "kern" 1, "ss01" 1, "ss02" 1; /* alternate glyphs */
  --jj-features-fractions: "kern" 1, "frac" 1;           /* measurements */

  /* --- SPACING · BASE UNIT ------------------------------------------------ */
  /* 4px grid. All spacing is a multiple of --jj-space-1.                    */
  --jj-space-px:   1px;
  --jj-space-0:    0;
  --jj-space-1:    0.25rem;   /*  4px */
  --jj-space-2:    0.5rem;    /*  8px */
  --jj-space-3:    0.75rem;   /* 12px */
  --jj-space-4:    1rem;      /* 16px */
  --jj-space-5:    1.25rem;   /* 20px */
  --jj-space-6:    1.5rem;    /* 24px */
  --jj-space-8:    2rem;      /* 32px */
  --jj-space-10:   2.5rem;    /* 40px */
  --jj-space-12:   3rem;      /* 48px */
  --jj-space-16:   4rem;      /* 64px */
  --jj-space-20:   5rem;      /* 80px */
  --jj-space-24:   6rem;      /* 96px */
  --jj-space-32:   8rem;      /* 128px */

  /* --- LAYOUT · WIDTHS ---------------------------------------------------- */
  --jj-width-content:  680px;   /* readable prose column */
  --jj-width-wide:     960px;   /* wide content, catalog grid */
  --jj-width-full:     1280px;  /* max site width */
  --jj-width-mark:     64px;    /* logomark square size (default) */
  --jj-width-mark-sm:  32px;    /* logomark small (nav, favicon context) */
  --jj-width-mark-lg:  96px;    /* logomark large (hero) */

  /* --- BORDERS ------------------------------------------------------------ */
  --jj-border-width:    1px;
  --jj-border-style:    solid;
  --jj-border:          var(--jj-border-width) var(--jj-border-style) var(--jj-border-color);
  --jj-border-strong:   var(--jj-border-width) var(--jj-border-style) var(--jj-border-strong);

  /* --- RADIUS ------------------------------------------------------------- */
  /* Brand uses sharp corners (rx=0) on the mark.                            */
  /* UI elements may use minimal rounding for ergonomics only.               */
  --jj-radius-0:   0;          /* mark, hardware-feel elements */
  --jj-radius-sm:  2px;        /* tags, badges, code blocks */
  --jj-radius-md:  4px;        /* buttons, inputs */
  --jj-radius-lg:  6px;        /* cards, panels */
  --jj-radius-pill:9999px;     /* pill badges only, use sparingly */

  /* --- MOTION ------------------------------------------------------------- */
  --jj-duration-fast:   80ms;
  --jj-duration-normal: 160ms;
  --jj-duration-slow:   320ms;
  --jj-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --jj-ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* --- Z-INDEX ------------------------------------------------------------ */
  --jj-z-base:    0;
  --jj-z-raised:  10;
  --jj-z-overlay: 100;
  --jj-z-modal:   200;
  --jj-z-toast:   300;
}


/* =============================================================================
   DARK MODE OVERRIDES
   Semantic role tokens flip. Palette tokens never change.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --jj-bg:           var(--jj-ink);
    --jj-bg-raised:    var(--jj-charcoal);
    --jj-bg-sunken:    #111111;
    --jj-fg:           var(--jj-white);
    --jj-fg-muted:     #aaaaaa;
    --jj-fg-subtle:    var(--jj-muted);
    --jj-border-color: var(--jj-border);
    --jj-border-strong:#555555;
  }
}

/* Manual dark mode toggle support — add data-theme="dark" to <html> */
[data-theme="dark"] {
  --jj-bg:           var(--jj-ink);
  --jj-bg-raised:    var(--jj-charcoal);
  --jj-bg-sunken:    #111111;
  --jj-fg:           var(--jj-white);
  --jj-fg-muted:     #aaaaaa;
  --jj-fg-subtle:    var(--jj-muted);
  --jj-border-color: var(--jj-border);
  --jj-border-strong:#555555;
}

[data-theme="light"] {
  --jj-bg:           var(--jj-white);
  --jj-bg-raised:    #ffffff;
  --jj-bg-sunken:    var(--jj-smoke);
  --jj-fg:           var(--jj-black);
  --jj-fg-muted:     #555555;
  --jj-fg-subtle:    var(--jj-muted);
  --jj-border-color: var(--jj-silver);
  --jj-border-strong:#999999;
}


/* =============================================================================
   CATEGORY ACCENT SCOPING
   Apply to any ancestor element. All children inherit the active accent.
   Usage: <section data-category="gb"> ... </section>
   ============================================================================= */

[data-category="gb"] {
  --jj-accent:       var(--jj-accent-gb);
  --jj-accent-light: var(--jj-accent-gb-light);
  --jj-accent-dark:  var(--jj-accent-gb-dark);
}
[data-category="nes"] {
  --jj-accent:       var(--jj-accent-nes);
  --jj-accent-light: var(--jj-accent-nes-light);
  --jj-accent-dark:  var(--jj-accent-nes-dark);
}
[data-category="xbx"] {
  --jj-accent:       var(--jj-accent-xbx);
  --jj-accent-light: var(--jj-accent-xbx-light);
  --jj-accent-dark:  var(--jj-accent-xbx-dark);
}
[data-category="ps"] {
  --jj-accent:       var(--jj-accent-ps);
  --jj-accent-light: var(--jj-accent-ps-light);
  --jj-accent-dark:  var(--jj-accent-ps-dark);
}
[data-category="web"] {
  --jj-accent:       var(--jj-accent-web);
  --jj-accent-light: var(--jj-accent-web-light);
  --jj-accent-dark:  var(--jj-accent-web-dark);
}
[data-category="shop"] {
  --jj-accent:       var(--jj-accent-shop);
  --jj-accent-light: var(--jj-accent-shop-light);
  --jj-accent-dark:  var(--jj-accent-shop-dark);
}


/* =============================================================================
   HIGH CONTRAST MODE
   Respects prefers-contrast: more. All tokens resolve to true black/white.
   ============================================================================= */

@media (prefers-contrast: more) {
  :root {
    --jj-fg:           #000000;
    --jj-fg-muted:     #000000;
    --jj-fg-subtle:    #333333;
    --jj-bg:           #ffffff;
    --jj-bg-raised:    #ffffff;
    --jj-bg-sunken:    #f0f0f0;
    --jj-border-color: #000000;
    --jj-border-strong:#000000;
  }
}


/* =============================================================================
   PRINT
   Tokens resolve to true black on white. Accents stripped.
   ============================================================================= */

@media print {
  :root {
    --jj-fg:           #000000;
    --jj-fg-muted:     #333333;
    --jj-fg-subtle:    #666666;
    --jj-bg:           #ffffff;
    --jj-bg-raised:    #ffffff;
    --jj-bg-sunken:    #f5f5f5;
    --jj-border-color: #cccccc;
    --jj-accent:       #000000;
  }
}


/* =============================================================================
   UTILITY CLASSES
   Convenience classes that reference tokens.
   These are optional — use tokens directly in component CSS where possible.
   ============================================================================= */

/* Text colors */
.jj-text-primary   { color: var(--jj-fg); }
.jj-text-muted     { color: var(--jj-fg-muted); }
.jj-text-subtle    { color: var(--jj-fg-subtle); }
.jj-text-accent    { color: var(--jj-accent); }

/* Background fills */
.jj-bg-page        { background-color: var(--jj-bg); }
.jj-bg-raised      { background-color: var(--jj-bg-raised); }
.jj-bg-sunken      { background-color: var(--jj-bg-sunken); }
.jj-bg-accent      { background-color: var(--jj-accent); }
.jj-bg-accent-tint { background-color: var(--jj-accent-light); }

/* Font families */
.jj-mono           { font-family: var(--jj-font-mono); }
.jj-sans           { font-family: var(--jj-font-sans); }

/* Font features */
.jj-tabular        { font-variant-numeric: tabular-nums; font-feature-settings: var(--jj-features-tabular); }
.jj-fractions      { font-feature-settings: var(--jj-features-fractions); }

/* Tracking */
.jj-tracking-wide    { letter-spacing: var(--jj-tracking-wide); }
.jj-tracking-wider   { letter-spacing: var(--jj-tracking-wider); }
.jj-tracking-widest  { letter-spacing: var(--jj-tracking-widest); }
.jj-tracking-tight   { letter-spacing: var(--jj-tracking-tight); }

/* Mark element — the [JJ] square */
.jj-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--jj-width-mark);
  height: var(--jj-width-mark);
  background-color: var(--jj-fg);
  color: var(--jj-bg);
  font-family: var(--jj-font-mono);
  font-weight: var(--jj-weight-medium);
  font-size: var(--jj-text-2xl);
  letter-spacing: var(--jj-tracking-tight);
  border-radius: var(--jj-radius-0);
  flex-shrink: 0;
}
.jj-mark--sm {
  width: var(--jj-width-mark-sm);
  height: var(--jj-width-mark-sm);
  font-size: var(--jj-text-md);
}
.jj-mark--lg {
  width: var(--jj-width-mark-lg);
  height: var(--jj-width-mark-lg);
  font-size: var(--jj-text-3xl);
}
.jj-mark--accent {
  background-color: var(--jj-accent);
  color: var(--jj-white);
}

/* Accent border-left — category indicator on cards/sections */
.jj-accent-bar {
  border-left: 3px solid var(--jj-accent);
  padding-left: var(--jj-space-4);
}

/* Category label pill */
.jj-category-label {
  display: inline-block;
  font-family: var(--jj-font-mono);
  font-size: var(--jj-text-xs);
  font-weight: var(--jj-weight-medium);
  letter-spacing: var(--jj-tracking-wider);
  color: var(--jj-accent);
  text-transform: uppercase;
}