/* ============================================================
   CHIP Design Tokens — v1.0.0
   "Retro 8-bit arcade meets a bank you can trust."

   Usage: @import this file into your CSS entry point.
   Reed — these are the canonical tokens. Consume directly.
   ============================================================ */

:root {
  /* ── SURFACES ─────────────────────────────────────────── */
  --chip-ink:              #0D0F14;   /* near-black (arcade screen) */
  --chip-paper:            #F4F1E8;   /* off-white (ledger paper) */

  /* ── PRIMARY ACCENTS (arcade / dark surface) ──────────── */
  --chip-green:            #00E08A;   /* primary accent — "stack up," money, go */
  --chip-gold:             #FFC73A;   /* rewards, badges, milestones */
  --chip-red:              #FF4D4D;   /* boss HP, honest urgency ONLY */
  --chip-blue:             #4278FF;   /* trust, links, Glass Ledger */

  /* ── LEDGER VARIANTS (light surface / PAPER) ──────────── */
  /* Use these on --chip-paper. All pass WCAG 2.2 AA (≥4.5:1). */
  --chip-green-ledger:     #007A48;
  --chip-gold-ledger:      #8B6508;
  --chip-red-ledger:       #D40000;
  --chip-blue-ledger:      #2058EC;

  /* ── 8-BIT PHOSPHOR EXTRAS (decorative only) ──────────── */
  --chip-green-phosphor:   #00FF66;
  --chip-amber-phosphor:   #FFB000;
  --chip-white-phosphor:   #E8E8E8;

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --chip-font-display:     'Press Start 2P', 'VT323', 'Pixelify Sans', monospace;
  --chip-font-body:        'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chip-font-mono:        'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── TYPE SCALE (1.25 major third) ────────────────────── */
  --chip-text-xs:          0.64rem;    /* 10.24px — pixel labels, badges */
  --chip-text-sm:          0.80rem;    /* 12.80px — fine print, legal */
  --chip-text-base:        1.00rem;    /* 16.00px — body */
  --chip-text-md:          1.25rem;    /* 20.00px — lede, card titles */
  --chip-text-lg:          1.56rem;    /* 25.00px — section heads */
  --chip-text-xl:          1.95rem;    /* 31.25px — page titles */
  --chip-text-2xl:         2.44rem;    /* 39.06px — hero display */
  --chip-text-3xl:         3.05rem;    /* 48.83px — homepage hero */
  --chip-text-4xl:         3.81rem;    /* 61.04px — brand moments */

  /* ── SPACING (4px base grid, 8-bit aligned) ───────────── */
  --chip-space-1:          0.25rem;    /*  4px */
  --chip-space-2:          0.50rem;    /*  8px */
  --chip-space-3:          0.75rem;    /* 12px */
  --chip-space-4:          1.00rem;    /* 16px */
  --chip-space-5:          1.50rem;    /* 24px */
  --chip-space-6:          2.00rem;    /* 32px */
  --chip-space-8:          3.00rem;    /* 48px */
  --chip-space-10:         4.00rem;    /* 64px */
  --chip-space-12:         5.00rem;    /* 80px */
  --chip-space-16:         8.00rem;    /* 128px */

  /* ── BORDERS & RADII ──────────────────────────────────── */
  --chip-radius-none:      0;
  --chip-radius-pixel:     2px;        /* tight, for pixel-art UI elements */
  --chip-radius-sm:        4px;        /* buttons, inputs */
  --chip-radius-md:        8px;        /* cards, modals */
  --chip-radius-lg:        12px;       /* large containers */
  --chip-radius-full:      9999px;     /* pills, badges */
  --chip-border-width:     2px;        /* default border — chunky, 8-bit feel */
  --chip-border-width-sm:  1px;        /* fine border — ledger lines */

  /* ── SHADOWS ──────────────────────────────────────────── */
  --chip-shadow-pixel-sm:  2px 2px 0 0 rgba(0,0,0,0.80);
  --chip-shadow-pixel-md:  4px 4px 0 0 rgba(0,0,0,0.80);
  --chip-shadow-glow-green: 0 0 12px rgba(0,224,138,0.40);
  --chip-shadow-glow-blue:  0 0 12px rgba(66,120,255,0.40);
  --chip-shadow-ledger:    0 1px 3px rgba(0,0,0,0.08);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --chip-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --chip-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --chip-duration-fast:    100ms;
  --chip-duration-base:    200ms;
  --chip-duration-slow:    400ms;

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --chip-z-base:           0;
  --chip-z-dropdown:       100;
  --chip-z-sticky:         200;
  --chip-z-overlay:        300;
  --chip-z-modal:          400;
  --chip-z-toast:          500;

  /* ── PIXEL ART RENDERING ──────────────────────────────── */
  --chip-image-rendering:  pixelated;
  --chip-crisp-edges:      crisp-edges;
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --chip-duration-fast:    0ms;
    --chip-duration-base:    0ms;
    --chip-duration-slow:    0ms;
  }
}

/* ── HIGH CONTRAST MODE ─────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --chip-ink:              #000000;
    --chip-paper:            #FFFFFF;
    --chip-green:            #00CC66;
    --chip-gold:             #FFB800;
    --chip-red:              #FF2222;
    --chip-blue:             #3366FF;
  }
}