/* Slabline brand tokens
 * Single source of truth — every other file in this package imports from here.
 *
 * Brand decision: dark/utilitarian, matching the product UI. The brand and the
 * app share the same skin — when you see Slabline marketing, it should feel
 * like an extension of the tool, not a separate consumer-y wrapper.
 */

:root {
  /* Surfaces */
  --bg:        #0B0D10;   /* deep near-black, primary brand background */
  --surface:   #12151A;   /* card / panel */
  --surface-2: #171B21;   /* nested card */
  --surface-3: #1E232B;   /* hovered cell, code block bg */

  /* Lines */
  --border:        #262C35;
  --border-strong: #363D48;
  --divider:       #1A1F26;

  /* Type */
  --text:       #E8ECF2;   /* primary */
  --text-mute:  #9099A6;   /* secondary */
  --text-dim:   #5B6472;   /* meta, kbd hints */
  --text-faint: #3E454F;   /* hairline, placeholder */

  /* Brand accent — green */
  --green:    oklch(0.72 0.16 155);
  --green-bg: oklch(0.32 0.08 155 / 0.3);
  --green-glow: oklch(0.72 0.16 155 / 0.4);

  /* Status accents (used sparingly) */
  --amber:    oklch(0.78 0.16 75);
  --amber-bg: oklch(0.32 0.08 75 / 0.3);
  --red:      oklch(0.68 0.20 25);
  --red-bg:   oklch(0.32 0.10 25 / 0.3);
  --blue:     oklch(0.72 0.14 240);
  --blue-bg:  oklch(0.32 0.08 240 / 0.3);
  --purple:   oklch(0.72 0.16 295);

  /* Type stack */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Code", monospace;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --glow:      0 0 24px oklch(0.72 0.16 155 / 0.35);

  /* Density */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;

  /* Type scale (web) */
  --text-2xs: 10.5px;   /* mono section labels */
  --text-xs:  11px;     /* pill, kbd */
  --text-sm:  12.5px;   /* row meta */
  --text-base: 14px;
  --text-md:  16px;
  --text-lg:  20px;
  --text-xl:  28px;
  --text-2xl: 40px;
  --text-3xl: 56px;
  --text-4xl: 84px;     /* hero */
  --text-5xl: 120px;    /* press hero */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }