/* ============================================================
   OKY & Company — Foundations
   Warm Paper, Hard Ink, Bright Blocks.
   A system of cream canvases, black rules, and saturated
   poster-print color blocks. Editorial, tactile, printed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  /* ---------- Paper (warm background ramp) ---------- */
  --paper-0: #F4EADB;     /* page canvas — warm cream, slightly pink */
  --paper-1: #EFE2CE;     /* section / raised paper */
  --paper-2: #E7D6BC;     /* hover / deeper cream */
  --paper-3: #DDC9A6;     /* tertiary strip */

  /* ---------- Ink (near-black, not pure) ---------- */
  --ink:        #121212;   /* primary ink — borders, text, rules */
  --ink-soft:   #2A2A2A;   /* secondary ink — body copy */
  --ink-mute:   #6B5F50;   /* tertiary — metadata on paper */
  --ink-faint:  #A89A85;   /* disabled / faint lines */

  /* ---------- Poster block colors (saturated, warm-biased) ---------- */
  --block-red:    #E23E1C;  /* primary block — vermilion */
  --block-orange: #F07A1D;  /* tangerine */
  --block-yellow: #F2C316;  /* saffron */
  --block-green:  #3E8B4F;  /* printed green */
  --block-blue:   #1E4FB8;  /* ultramarine */
  --block-cyan:   #3AA5C2;  /* washed cyan */
  --block-pink:   #E88AA6;  /* risograph pink */
  --block-plum:   #6E2A4F;  /* plum */
  --block-cream:  #F9EBCB;  /* highlight cream */

  /* ---------- Text-on-block (computed for legibility) ---------- */
  --on-red:    #F9EBCB;
  --on-orange: #121212;
  --on-yellow: #121212;
  --on-green:  #F9EBCB;
  --on-blue:   #F9EBCB;
  --on-cyan:   #121212;
  --on-pink:   #121212;
  --on-plum:   #F9EBCB;
  --on-cream:  #121212;

  /* ---------- Semantic (reuses blocks) ---------- */
  --sem-success: var(--block-green);
  --sem-warning: var(--block-orange);
  --sem-error:   var(--block-red);
  --sem-info:    var(--block-blue);

  /* ---------- Type: Families ---------- */
  --font-display: 'Inter Tight', 'Noto Sans SC', system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-cjk:     'Noto Sans SC', 'Inter Tight', sans-serif;

  /* ---------- Type sizes ---------- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;
  --text-5xl: 60px;
  --text-6xl: 84px;
  --text-7xl: 120px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --track-display: -0.03em;
  --track-headline: -0.02em;
  --track-body: -0.005em;
  --track-label: 0.06em;
  --track-mono: 0;

  --leading-display: 0.92;
  --leading-headline: 1.05;
  --leading-body: 1.5;
  --leading-tight: 1.15;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---------- Radii (SHARP — editorial/print) ---------- */
  --radius-sm: 0px;   /* default — everything is a rectangle */
  --radius-md: 0px;
  --radius-lg: 2px;   /* only where strictly necessary */
  --radius-full: 999px; /* only for the rare status dot */

  /* ---------- Rule weights (the defining visual element) ---------- */
  --rule-hair: 1px;   /* inline separators */
  --rule-1:    2px;   /* standard block border — the house rule */
  --rule-2:    3px;   /* emphasized block */
  --rule-3:    4px;   /* section dividers, brand marks */

  /* ---------- Hard-edge shadow (letterpress offset) ---------- */
  --press-sm: 3px 3px 0 var(--ink);
  --press-md: 5px 5px 0 var(--ink);
  --press-lg: 8px 8px 0 var(--ink);
  --press-color: 5px 5px 0 var(--block-red);

  /* ---------- Motion ---------- */
  --ease-oky: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 80ms;
  --motion-base: 120ms;
  --motion-slow: 200ms;

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --gutter-desktop: 64px;
  --gutter-mobile: 20px;
  --nav-h: 64px;
}

/* ============================================================
   Typography classes
   ============================================================ */

.oky-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.oky-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.oky-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.oky-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--track-headline);
  color: var(--ink);
}

.oky-h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-headline);
  letter-spacing: var(--track-headline);
  color: var(--ink);
}

.oky-h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-headline);
  color: var(--ink);
}

.oky-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
}

.oky-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  color: var(--ink-soft);
}

.oky-body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  color: var(--ink-soft);
}

.oky-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.oky-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   Block utility — the defining OKY building element.
   A rectangle with a hard black border and optional colored fill.
   Apply `.oky-block` + a color modifier + optional `.press` for offset.
   ============================================================ */

.oky-block {
  border: var(--rule-1) solid var(--ink);
  background: var(--paper-0);
  color: var(--ink);
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  position: relative;
}
.oky-block.press { box-shadow: var(--press-sm); }
.oky-block.press-md { box-shadow: var(--press-md); }

.bg-red    { background: var(--block-red);    color: var(--on-red); }
.bg-orange { background: var(--block-orange); color: var(--on-orange); }
.bg-yellow { background: var(--block-yellow); color: var(--on-yellow); }
.bg-green  { background: var(--block-green);  color: var(--on-green); }
.bg-blue   { background: var(--block-blue);   color: var(--on-blue); }
.bg-cyan   { background: var(--block-cyan);   color: var(--on-cyan); }
.bg-pink   { background: var(--block-pink);   color: var(--on-pink); }
.bg-plum   { background: var(--block-plum);   color: var(--on-plum); }
.bg-cream  { background: var(--block-cream);  color: var(--on-cream); }
.bg-ink    { background: var(--ink);          color: var(--paper-0); }

/* Reset */
* { box-sizing: border-box; }
html, body { background: var(--paper-0); color: var(--ink); margin: 0; padding: 0; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: #F9EBCB; color: #E23E1C; }
::-moz-selection { background: #F9EBCB; color: #E23E1C; }