/*
 * TetrisUI — DOSS Design System
 * Colors & Type tokens for HTML artifacts.
 *
 * Source: packages/ui/src/tokens/tokens.css and packages/ui/src/tailwind-config.ts
 * Dark mode is the DEFAULT. Apply .light on :root (or a container) for light mode.
 *
 * Rules:
 *   - No gradients. No emoji.
 *   - Color is signal, not decoration.
 *   - Max 2 font weights per page (400 + 500, or 400 + 600).
 *   - Radii use var(--ds-radius); default is 4px.
 *   - Shadows use the `elevation-1/2/3` scale (never "material").
 */

/* ---- Fonts ----
 * Single family: PP Neue Montreal. Used for EVERYTHING — UI, headings,
 * body copy, numbers, code, kbd. No Geist, no Geist Mono.
 *
 * PP Neue is not monospaced, so code/kbd/numeric tables rely on
 * `font-variant-numeric: tabular-nums` + explicit columnar alignment
 * (text-align:right, fixed widths) rather than character-grid monospace.
 *
 * PP Neue Montreal ships six upright weights + matching italics:
 *   Thin(100), Light(300), Book(350), Regular(400), Medium(500), Bold(700).
 * "Book" is a 350 — noticeably lighter than Regular — and is what we
 * use for long-form reading copy.
 */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Book.ttf") format("truetype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ====================================================
   * BACKGROUNDS
   * ==================================================== */
  --ds-background-100: hsl(0, 0%, 0%);        /* page bg */
  --ds-background-200: hsl(0, 0%, 0%);        /* secondary bg */

  /* ====================================================
   * GRAY SCALE — DOSS neutral spine (dark)
   * 100–300 = overlays (transparent white)
   * 400–500 = borders / hairlines
   * 600–900 = secondary / muted text
   * 1000     = primary foreground
   * ==================================================== */
  --ds-gray-100: rgba(255, 255, 255, 0.03);
  --ds-gray-200: rgba(255, 255, 255, 0.05);
  --ds-gray-300: rgba(255, 255, 255, 0.08);
  --ds-gray-400: hsl(0, 0%, 18%);
  --ds-gray-500: hsl(0, 0%, 27%);
  --ds-gray-600: hsl(0, 0%, 53%);
  --ds-gray-700: hsl(0, 0%, 56%);
  --ds-gray-800: hsl(0, 0%, 49%);
  --ds-gray-900: hsl(0, 0%, 63%);
  --ds-gray-1000: hsl(0, 0%, 93%);

  /* Alpha grays (for overlays, dividers, input fills) */
  --ds-gray-alpha-100: #ffffff0f;
  --ds-gray-alpha-200: #ffffff17;
  --ds-gray-alpha-300: #ffffff21;
  --ds-gray-alpha-400: #ffffff24;
  --ds-gray-alpha-500: #ffffff3d;

  /* ====================================================
   * ACCENT — default DOSS blue
   * ==================================================== */
  --ds-blue-700: hsl(212, 100%, 48%);   /* accent solid   */
  --ds-blue-900: hsl(210, 100%, 66%);   /* accent fg on dark */

  /* ====================================================
   * SEMANTIC COLORS
   * ==================================================== */
  --ds-red-700:    hsl(358, 75%, 59%);
  --ds-red-900:    hsl(358, 100%, 69%);
  --ds-amber-700:  hsl(39, 100%, 57%);
  --ds-amber-900:  hsl(39, 90%, 50%);
  --ds-green-700:  hsl(131, 41%, 46%);
  --ds-green-900:  hsl(131, 43%, 57%);
  --ds-teal-700:   hsl(173, 80%, 36%);
  --ds-purple-700: hsl(272, 51%, 54%);
  --ds-pink-700:   hsl(336, 80%, 58%);

  /* ====================================================
   * SEMANTIC ALIASES
   * Map the raw tokens onto role names the Tailwind
   * preset exposes (background / surface / border / ...).
   * Use THESE in artifacts, not the raw scale.
   * ==================================================== */
  --bg:              var(--ds-background-100);
  --bg-secondary:    var(--ds-background-200);

  --surface:         var(--ds-gray-100);
  --surface-hover:   var(--ds-gray-200);
  --surface-active:  var(--ds-gray-300);

  --border:          var(--ds-gray-alpha-400);
  --border-hover:    var(--ds-gray-alpha-500);

  --fg:              var(--ds-gray-1000);   /* primary text */
  --fg-secondary:    var(--ds-gray-900);    /* secondary text */
  --fg-muted:        var(--ds-gray-600);    /* captions, placeholders */

  --accent:          var(--ds-blue-700);
  --accent-fg:       var(--ds-blue-900);

  --destructive:     var(--ds-red-700);
  --destructive-fg:  var(--ds-red-900);
  --warning:         var(--ds-amber-700);
  --warning-fg:      var(--ds-amber-900);
  --success:         var(--ds-green-700);
  --success-fg:      var(--ds-green-900);

  --overlay-subtle:  var(--ds-gray-alpha-100);
  --overlay:         var(--ds-gray-alpha-200);
  --overlay-medium:  var(--ds-gray-alpha-300);

  --ring:            hsl(212, 100%, 48%);
  --input:           var(--ds-gray-alpha-400);
  --input-hover:     var(--ds-gray-alpha-500);

  /* ====================================================
   * TYPOGRAPHY
   * One family: PP Neue Montreal. The "mono" role still exists for
   * intent (numbers, kbd, code) but maps to the same family with
   * tabular figures enabled via font-feature-settings / variant.
   *
   * PP Neue Montreal is a geometric grotesque with low contrast and a
   * slightly condensed feel. Headings use 500 (Medium) — going heavier than
   * Medium breaks the calm, engineered tone.
   * ==================================================== */
  --font-sans: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Type scale — name. size / line-height / letter-spacing / weight */
  --text-heading-48: 48px; --lh-heading-48: 1.05;  --ls-heading-48: -0.035em;--fw-heading-48: 500;
  --text-heading-32: 32px; --lh-heading-32: 1.1;   --ls-heading-32: -0.025em;--fw-heading-32: 500;
  --text-heading-24: 24px; --lh-heading-24: 1.2;   --ls-heading-24: -0.02em; --fw-heading-24: 500;
  --text-heading-20: 20px; --lh-heading-20: 1.25;  --ls-heading-20: -0.015em;--fw-heading-20: 500;
  --text-heading-16: 16px; --lh-heading-16: 1.35;  --ls-heading-16: -0.01em; --fw-heading-16: 500;
  --text-heading-14: 14px; --lh-heading-14: 1.4;   --ls-heading-14: -0.005em;--fw-heading-14: 500;

  --text-copy-16:    16px; --lh-copy-16:    1.6;   --fw-copy-16:    400;
  --text-copy-14:    14px; --lh-copy-14:    1.5;   --fw-copy-14:    400;
  --text-copy-13:    13px; --lh-copy-13:    1.5;   --fw-copy-13:    400;

  --text-label-14:   14px; --lh-label-14:   1.4;   --fw-label-14:   500;
  --text-label-13:   13px; --lh-label-13:   1.4;   --fw-label-13:   500;
  --text-label-12:   12px; --lh-label-12:   1.3;   --fw-label-12:   500;

  /* ====================================================
   * SPACING — 4px base unit
   * ==================================================== */
  --space-unit: 4px;
  --space-0_5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;

  /* ====================================================
   * RADII
   * ==================================================== */
  --ds-radius:       4px;
  --radius-base:     var(--ds-radius);
  --radius-medium:   calc(var(--ds-radius) + 2px);  /* 6px */
  --radius-pill:     9999px;

  /* ====================================================
   * ELEVATION (never call these "material")
   * ==================================================== */
  --shadow-elevation-1: 0 1px 2px rgba(0,0,0,0.04),  0 0 0 1px var(--ds-gray-alpha-400);
  --shadow-elevation-2: 0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px var(--ds-gray-alpha-400);
  --shadow-elevation-3: 0 8px 30px rgba(0,0,0,0.24), 0 0 0 1px var(--ds-gray-alpha-400);

  color-scheme: dark;
}

/* ======================================================
 * LIGHT MODE
 * Apply `.light` or `[data-theme="light"]` on the root
 * (or any container) to flip the palette.
 * ====================================================== */
.light,
[data-theme="light"] {
  --ds-background-100: hsl(0, 0%, 100%);
  --ds-background-200: hsl(0, 0%, 98%);

  --ds-gray-100: hsl(0, 0%, 95%);
  --ds-gray-200: hsl(0, 0%, 92%);
  --ds-gray-300: hsl(0, 0%, 90%);
  --ds-gray-400: hsl(0, 0%, 92%);
  --ds-gray-500: hsl(0, 0%, 79%);
  --ds-gray-600: hsl(0, 0%, 66%);
  --ds-gray-700: hsl(0, 0%, 56%);
  --ds-gray-800: hsl(0, 0%, 40%);
  --ds-gray-900: hsl(0, 0%, 30%);
  --ds-gray-1000: hsl(0, 0%, 9%);

  --ds-gray-alpha-100: #0000000d;
  --ds-gray-alpha-200: #00000012;
  --ds-gray-alpha-300: #0000001a;
  --ds-gray-alpha-400: #00000014;
  --ds-gray-alpha-500: #00000024;

  --ds-blue-900: hsl(211, 100%, 42%);
  --ds-red-900:  hsl(358, 66%, 48%);

  --ring:        hsl(212, 100%, 48%);
  --input:       #00000014;
  --input-hover: #00000024;

  color-scheme: light;
}

/* ======================================================
 * SEMANTIC ELEMENT STYLES
 * Use class selectors; keeps element choice flexible.
 * ====================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}

.ds-h1, h1.ds { font-family: var(--font-sans); font-size: var(--text-heading-48); line-height: var(--lh-heading-48); letter-spacing: var(--ls-heading-48); font-weight: var(--fw-heading-48); color: var(--fg); margin: 0; }
.ds-h2, h2.ds { font-family: var(--font-sans); font-size: var(--text-heading-32); line-height: var(--lh-heading-32); letter-spacing: var(--ls-heading-32); font-weight: var(--fw-heading-32); color: var(--fg); margin: 0; }
.ds-h3, h3.ds { font-family: var(--font-sans); font-size: var(--text-heading-24); line-height: var(--lh-heading-24); letter-spacing: var(--ls-heading-24); font-weight: var(--fw-heading-24); color: var(--fg); margin: 0; }
.ds-h4, h4.ds { font-family: var(--font-sans); font-size: var(--text-heading-20); line-height: var(--lh-heading-20); letter-spacing: var(--ls-heading-20); font-weight: var(--fw-heading-20); color: var(--fg); margin: 0; }
.ds-h5, h5.ds { font-family: var(--font-sans); font-size: var(--text-heading-16); line-height: var(--lh-heading-16); letter-spacing: var(--ls-heading-16); font-weight: var(--fw-heading-16); color: var(--fg); margin: 0; }
.ds-h6, h6.ds { font-family: var(--font-sans); font-size: var(--text-heading-14); line-height: var(--lh-heading-14); font-weight: var(--fw-heading-14); color: var(--fg); margin: 0; }

.ds-copy,  p.ds    { font-size: var(--text-copy-14); line-height: var(--lh-copy-14); color: var(--fg); margin: 0; }
.ds-copy-lg        { font-size: var(--text-copy-16); line-height: var(--lh-copy-16); color: var(--fg); }
.ds-copy-sm        { font-size: var(--text-copy-13); line-height: var(--lh-copy-13); color: var(--fg-secondary); }

.ds-label          { font-size: var(--text-label-13); line-height: var(--lh-label-13); font-weight: var(--fw-label-13); color: var(--fg-secondary); }
.ds-label-sm       { font-size: var(--text-label-12); line-height: var(--lh-label-12); font-weight: var(--fw-label-12); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* "Mono" role — PP Neue with tabular figures for dashboards and code.
   Tracked slightly wider for scannability since we're not on a real mono grid. */
.ds-mono, code.ds  {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.01em;
}
.ds-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Link */
.ds-link { color: var(--accent-fg); text-decoration: none; }
.ds-link:hover { text-decoration: underline; }

/* Focus ring (keyboard-only) */
*:focus-visible {
  outline: 1px solid var(--ring);
  outline-offset: 1px;
  border-radius: 2px;
}