/* ============================================================
   RAS.agency — Colors + Typography tokens
   ============================================================
   Near-black engineering aesthetic. Electric blue accent.
   No gradients, no glow, no purple. Dark only.
   ============================================================ */

:root {
  /* ---------- CORE PALETTE (raw values) ---------- */
  --c-bg:            hsl(225 15% 6%);    /* #0d0f14 — page background */
  --c-surface:       hsl(225 14% 8%);    /* cards — slightly lighter than bg */
  --c-surface-2:     hsl(225 13% 11%);   /* elevated / hover */
  --c-border:        hsl(225 10% 16%);   /* very subtle dividers */
  --c-border-strong: hsl(225 10% 22%);   /* input borders, hover borders */

  --c-fg:            hsl(220 15% 96%);   /* primary text */
  --c-fg-muted:      hsl(220 10% 50%);   /* secondary text */
  --c-fg-dim:        hsl(220 10% 35%);   /* tertiary / decorative */

  --c-accent:        hsl(210 100% 60%);  /* electric blue — primary CTA */
  --c-accent-hover:  hsl(210 100% 65%);
  --c-accent-press:  hsl(210 100% 54%);
  --c-accent-ink:    hsl(225 30% 8%);    /* ink on top of accent */

  /* status — desaturated so they sit in the dark palette */
  --c-success:       hsl(150 55% 50%);
  --c-warn:          hsl(38  90% 58%);
  --c-danger:        hsl(2   75% 58%);

  /* ---------- SEMANTIC ALIASES ---------- */
  --bg:            var(--c-bg);
  --bg-card:       var(--c-surface);
  --bg-elevated:   var(--c-surface-2);
  --border:        var(--c-border);
  --border-strong: var(--c-border-strong);
  --fg:            var(--c-fg);
  --fg-muted:      var(--c-fg-muted);
  --fg-dim:        var(--c-fg-dim);
  --accent:        var(--c-accent);
  --accent-ink:    var(--c-accent-ink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* headings use Space Grotesk 700 with tight tracking */
  --fs-display:  clamp(3rem, 6vw, 5.25rem);  /* hero */
  --fs-h1:       4.5rem;                      /* 72 */
  --fs-h2:       2.25rem;                     /* 36 */
  --fs-h3:       1.5rem;                      /* 24 */
  --fs-h4:       1.125rem;                    /* 18 */
  --fs-body:     1rem;                        /* 16 */
  --fs-small:    0.875rem;                    /* 14 */
  --fs-meta:     0.75rem;                     /* 12 — mono */
  --fs-badge:    0.75rem;                     /* 12 — mono uppercase */

  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.55;
  --lh-tight:    1.25;

  --ls-display:  -0.02em;
  --ls-heading:  -0.015em;
  --ls-body:     0;
  --ls-mono:     0.01em;
  --ls-badge:    0.08em;   /* uppercase mono badges */

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---------- SHADOWS (subtle — mostly inner rings) ---------- */
  --shadow-ring:   inset 0 0 0 1px var(--border);
  --shadow-ring-2: inset 0 0 0 1px var(--border-strong);
  --shadow-card:   0 1px 0 0 rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-focus:  0 0 0 3px hsl(210 100% 60% / 0.25);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:   120ms;
  --dur-med:    200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   ELEMENT DEFAULTS — applied to plain HTML inside this system
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   letter-spacing: var(--ls-heading); }

p { margin: 0; }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--ls-mono);
}

/* ---------- UTILITY CLASSES ---------- */
.badge-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  letter-spacing: var(--ls-badge);
  color: var(--fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  text-transform: none;         /* badges are Title Case, not UPPER */
}

.meta-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--fg-muted);
}

.muted { color: var(--fg-muted); }
.dim   { color: var(--fg-dim); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); border-color: var(--accent-press); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-secondary:hover  { background: var(--bg-elevated); border-color: var(--fg-dim); }
.btn-secondary:active { background: var(--bg-card); }

.btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--fg); background: var(--bg-card); }