/* Grimberg Studio — design tokens
   Concept: "the lit cabin on a grim mountain".
   Mostly cold, desaturated slate. One warm light (amber) used sparingly
   for the thing you want the eye to land on. Pixel-crisp edges, no blur. */

:root {
  /* ---- Ground (backgrounds, darkest → lightest) ---- */
  --bg-0: #0b0d11;   /* page background — the night sky */
  --bg-1: #12151b;   /* sections / panels */
  --bg-2: #1a1e26;   /* cards, raised surfaces */
  --bg-3: #232934;   /* hover states, inputs */

  /* ---- Rock (borders, dividers, muted UI) ---- */
  --rock-1: #2f3742;
  --rock-2: #3f4854;  /* default border */
  --rock-3: #55606d;  /* strong border, disabled text */

  /* ---- Snow / mist (text) ---- */
  --snow-0: #e6eaee;  /* headings, primary text */
  --snow-1: #c3cad2;  /* body text */
  --snow-2: #8e98a4;  /* secondary text, captions */
  --snow-3: #66707c;  /* placeholders, meta */

  /* ---- Ember (the window light — the only warm color) ---- */
  --ember-0: #f6c76b; /* hover / highlight */
  --ember-1: #e9a03b; /* primary accent: CTA, links, focus ring */
  --ember-2: #c9772a; /* pressed / active */
  --ember-3: #7a4a1e; /* accent border / dim accent */
  --ember-glow: rgba(233, 160, 59, 0.18);

  /* ---- Pine (secondary accent — success, tags, sparingly) ---- */
  --pine-0: #7c9a4a;
  --pine-1: #4f7a3a;
  --pine-2: #2f4d2b;

  /* ---- Feedback ---- */
  --danger: #c6553f;
  --danger-dim: #4a2320;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg: var(--bg-0);
  --color-surface: var(--bg-1);
  --color-surface-raised: var(--bg-2);
  --color-border: var(--rock-2);
  --color-border-strong: var(--rock-3);
  --color-text: var(--snow-1);
  --color-heading: var(--snow-0);
  --color-text-muted: var(--snow-2);
  --color-accent: var(--ember-1);
  --color-accent-hover: var(--ember-0);
  --color-accent-active: var(--ember-2);
  --color-on-accent: var(--bg-0);
  --color-link: var(--ember-1);
  --color-focus: var(--ember-0);

  /* ---- Typography ---- */
  --font-display: "Jersey 20", "Pixelify Sans", monospace;   /* headings — pixel grid, reads like a condensed sans */
  --font-pixel: "Jersey 10", "Silkscreen", monospace;        /* eyebrows, tags, buttons — same family, tighter grid */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* body stays readable */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4.25rem;

  --leading-tight: 1.1;
  --leading-normal: 1.55;
  --tracking-display: 0;
  --tracking-caps: 0.1em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Shape: pixel-art = hard edges, notched corners ---- */
  --px: 3px;                 /* the "pixel" — every border, notch and offset is a multiple of this */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Notched pixel border: four hard shadows, no corner pixels.
     Use on elements with NO css border: box-shadow: var(--pixel-border). */
  --pixel-border:
    0 calc(-1 * var(--px)) 0 0 var(--rock-2),
    0 var(--px) 0 0 var(--rock-2),
    calc(-1 * var(--px)) 0 0 0 var(--rock-2),
    var(--px) 0 0 0 var(--rock-2);
  --pixel-border-strong:
    0 calc(-1 * var(--px)) 0 0 var(--snow-2),
    0 var(--px) 0 0 var(--snow-2),
    calc(-1 * var(--px)) 0 0 0 var(--snow-2),
    var(--px) 0 0 0 var(--snow-2);
  --pixel-border-accent:
    0 calc(-1 * var(--px)) 0 0 var(--ember-1),
    0 var(--px) 0 0 var(--ember-1),
    calc(-1 * var(--px)) 0 0 0 var(--ember-1),
    var(--px) 0 0 0 var(--ember-1);

  /* Clip-path notch for elements that carry their own background (buttons, tags) */
  --notch: polygon(
    var(--px) 0, calc(100% - var(--px)) 0,
    calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%, var(--px) 100%,
    var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)),
    0 var(--px), var(--px) var(--px));

  /* ---- Elevation: hard offset "drop" shadows, never blur ---- */
  --shadow-color: var(--rock-1);   /* one step lighter than the page so the offset reads on bg-0 */
  --shadow-sm: var(--px) var(--px) 0 0 var(--shadow-color);
  --shadow-md: calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--shadow-color);
  --shadow-lg: calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--shadow-color);
  --shadow-glow: calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--ember-3);

  /* Bevel (inset light top-left, dark bottom-right) for buttons/inputs */
  --bevel-up:   inset var(--px) var(--px) 0 0 rgba(255,255,255,.28), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 rgba(0,0,0,.35);
  --bevel-down: inset var(--px) var(--px) 0 0 rgba(0,0,0,.35), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 rgba(255,255,255,.12);

  /* ---- Dither / texture ---- */
  --dither-checker: repeating-conic-gradient(var(--rock-1) 0 25%, transparent 0 50%) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);
  --dither-ember:   repeating-conic-gradient(var(--ember-3) 0 25%, transparent 0 50%) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);
  --scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);

  /* ---- Layout ---- */
  --container: 72rem;
  --container-narrow: 44rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---- Motion ---- */
  --ease-out: steps(4, end);   /* motion snaps in frames, no easing curves */
  --dur-fast: 100ms;
  --dur-base: 200ms;

  color-scheme: dark;
}