/* ==========================================================================
   khursani design tokens — v1 (season s40)
   Calm readable dark theme, humanist sans, measured contrast.

   Layer 1  primitives  — hue-constant oklch ramps, named by value
   Layer 2  semantic    — role-named tokens; the only tier pages reference
   Layer 3  base        — element defaults + shared components

   Every rendered text pair is measured: WCAG 2 (text >= 4.5:1, UI >= 3:1)
   and APCA (body >= Lc 75, labels >= Lc 60).
   Evidence: .rumpun/runs/s40/a2/evidence/contrast-report.json
   ========================================================================== */

/* ---------- layer 1 · primitives ---------- */
:root {
  color-scheme: dark;

  /* Warm charcoal ramp — hue 75, steps denser at the light end,
     both ends short of pure black/white. */
  --w-025: oklch(0.96 0.006 75);
  --w-100: oklch(0.92 0.008 75);
  --w-300: oklch(0.82 0.012 75);
  --w-400: oklch(0.78 0.014 75);
  --w-500: oklch(0.55 0.012 75);
  --w-700: oklch(0.36 0.014 75);
  --w-750: oklch(0.32 0.013 75);
  --w-800: oklch(0.285 0.012 75);
  --w-850: oklch(0.245 0.011 75);
  --w-900: oklch(0.205 0.010 75);
  --w-950: oklch(0.165 0.010 75);

  /* Teal ramp — hue 190. Only steps with a role are kept. */
  --teal-050: oklch(0.86 0.082 190);
  --teal-100: oklch(0.80 0.098 190);
  --teal-600: oklch(0.45 0.075 190);
  --teal-700: oklch(0.38 0.062 190);
  --teal-900: oklch(0.28 0.038 190);

  /* Status ramps — green 150, amber 80, red 25, blue 260. */
  --green-400: oklch(0.78 0.132 150);
  --green-900: oklch(0.29 0.048 150);
  --amber-400: oklch(0.80 0.132 80);
  --amber-900: oklch(0.29 0.048 80);
  --red-400: oklch(0.72 0.150 25);
  --red-900: oklch(0.28 0.052 25);
  --blue-400: oklch(0.78 0.096 260);
  --blue-900: oklch(0.30 0.048 260);

  /* Type — humanist sans (Source Sans 3 vendored in /fonts). */
  --font-sans: "Source Sans 3", Seravek, "Gill Sans Nova", Ubuntu, Calibri,
    "DejaVu Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  --tracking-tight: -0.011em;
  --tracking-caps: 0.06em;

  /* Spacing — 4px base grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --dur-fast: 120ms;
  --dur-med: 200ms;
}

/* ---------- layer 2 · semantic roles ---------- */
:root {
  /* surfaces + lines */
  --color-bg: var(--w-950);
  --color-surface: var(--w-900);
  --color-surface-raised: var(--w-850);
  --color-border: var(--w-800);
  --color-border-strong: var(--w-750);
  --color-line-strong: var(--w-500);

  /* text */
  --color-text: var(--w-100);
  --color-text-secondary: var(--w-300);
  --color-text-faint: var(--w-400);

  /* accent = interactive, nothing else */
  --color-accent: var(--teal-100);
  --color-accent-strong: var(--teal-050);
  --color-accent-solid: var(--teal-600);
  --color-accent-solid-strong: var(--teal-700);
  --color-accent-soft: var(--teal-900);
  --color-on-accent: var(--w-950);

  /* status: text + soft fill per status */
  --color-success: var(--green-400);
  --color-success-soft: var(--green-900);
  --color-warning: var(--amber-400);
  --color-warning-soft: var(--amber-900);
  --color-danger: var(--red-400);
  --color-danger-soft: var(--red-900);
  --color-info: var(--blue-400);
  --color-info-soft: var(--blue-900);
}

/* ---------- layer 3 · base ---------- */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-wrap: break-word;
}

a { color: var(--color-accent); text-decoration-thickness: from-font; }
a:hover { color: var(--color-accent-strong); }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

::selection { background: var(--color-accent-soft); color: var(--color-text); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

button {
  font: inherit;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
button:hover { background: var(--color-accent-strong); }

input, textarea {
  font: inherit;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
input:focus-visible, textarea:focus-visible { outline-offset: 0; }

@media (max-width: 640px) {
  input, textarea { font-size: 1rem; }
}

/* ---------- shared components ---------- */
.muted { color: var(--color-text-secondary); }

.caps-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-secondary);
}

.badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge.live      { background: var(--color-success-soft); color: var(--color-success); }
.badge.deploying { background: var(--color-warning-soft); color: var(--color-warning); }
.badge.internal  { background: var(--color-info-soft);    color: var(--color-info); }
.badge.down      { background: var(--color-danger-soft);  color: var(--color-danger); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- site chrome (directory pages; console page css overrides) ---------- */
header { padding: var(--space-7) var(--space-6) var(--space-5); border-bottom: 1px solid var(--color-border); }
header h1 { font-size: var(--text-2xl); font-weight: 650; }
header h1 span { color: var(--color-text-secondary); font-weight: 400; }
header h1 a { color: inherit; text-decoration: none; }
header p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-md); max-width: 60ch; }
nav { margin-top: var(--space-3); }
nav a { margin-right: var(--space-4); font-size: var(--text-md); text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { max-width: 62rem; margin: 0 auto; padding: var(--space-6); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.card:hover { border-color: var(--color-border-strong); }
.card h2 { font-size: var(--text-lg); }
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; }
.row { display: flex; justify-content: space-between; align-items: center; }
.date { color: var(--color-text-faint); font-size: var(--text-xs); }
.feature, .store { max-width: 62rem; margin: var(--space-4) auto 0; padding: 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--text-sm); }
footer { text-align: center; color: var(--color-text-secondary); font-size: var(--text-sm); padding: var(--space-2) 0 var(--space-7); }
footer a { text-decoration: none; }
.tier { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.tier h2 { font-size: var(--text-lg); }
.price { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.price small { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: 400; }
.tier ul { margin: 0; padding-left: 1.125rem; color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; }
.tier li { margin: var(--space-1) 0; }
.tier a.cta { display: block; text-align: center; background: var(--color-accent-soft); color: var(--color-accent); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); padding: var(--space-3) 0; text-decoration: none; font-weight: 600; font-size: var(--text-md); transition: border-color var(--dur-fast) ease; }
.tier a.cta:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }