/*
  Design tokens: "Datasheet Amber"
  A custom theme-factory theme. The page is set like an electronics component
  datasheet: cool near-black paper with a raised panel layer, hairline rules,
  one amber signal colour (interactive elements only), IBM Plex Sans for
  reading and IBM Plex Mono for data (labels, dates, stacks, coordinates).

  Scales
    type     modular, ratio 1.333 (perfect fourth) from a 16px base
    spacing  Tailwind steps (1 = 0.25rem)
    radius   one radius for every box (4px); full only for the status dot

  Variants
    dark (default)  bare :root
    light           prefers-color-scheme: light, or [data-theme="light"]
    high contrast   prefers-contrast: more, or [data-contrast="more"]
                    (layers on top of dark or light: each theme defines its
                    own --hc-* values, and the contrast block swaps them in)
*/

:root {
  /* ---------- Color: dark ---------- */
  --color-bg: #0b0d10;            /* page: near-black, cool (not #000) */
  --color-surface: #111419;       /* raised panels: hero facts, project sheets */
  --color-surface-hover: #161a21;
  --color-rule: #232831;          /* hairlines between rows */
  --color-rule-strong: #5f6878;   /* control borders, section rules (3.5:1) */
  --color-text: #e8eaed;
  --color-muted: #9ba3af;         /* 7.6:1 on bg */
  --color-faint: #7d8592;         /* tertiary mono labels, 5.1:1 on bg */
  --color-accent: #fbbf24;        /* amber-400: links, buttons, focus */
  --color-accent-hover: #fcd34d;  /* amber-300 */
  --color-on-accent: #0b0d10;
  --color-signal: #34d399;        /* emerald-400: status only */
  --color-todo: #a7afbb;          /* placeholder text */
  --color-todo-line: #4a5260;     /* placeholder dashed outline */
  --color-selection: rgb(251 191 36 / 0.3);
  --shadow-panel: 0 1px 0 rgb(255 255 255 / 0.03) inset;

  --hc-bg: #000000;
  --hc-surface: #0a0a0a;
  --hc-surface-hover: #141414;
  --hc-rule: #8a8f98;
  --hc-rule-strong: #ffffff;
  --hc-text: #ffffff;
  --hc-muted: #e5e7eb;
  --hc-faint: #d1d5db;
  --hc-accent: #ffd166;
  --hc-accent-hover: #ffe199;
  --hc-on-accent: #000000;
  --hc-signal: #6ee7b7;
  --hc-todo: #e5e7eb;
  --hc-todo-line: #d1d5db;

  color-scheme: dark;

  /* ---------- Type ---------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular scale, ratio 1.333 */
  --step--1: 0.75rem;     /* 12  mono labels, tags */
  --step--05: 0.875rem;   /* 14  meta, table values (half step) */
  --step-0: 1rem;         /* 16  body */
  --step-05: 1.125rem;    /* 18  lead body (half step) */
  --step-1: 1.333rem;     /* 21  row titles, role line */
  --step-2: 1.777rem;     /* 28  project titles, contact email */
  --step-3: 2.369rem;     /* 38  section headings */
  --step-4: 3.157rem;     /* 50  section headings, wide */
  --step-6: 6rem;         /* 96  hero name (display max) */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-display: 0.92;
  --leading-tight: 1.12;
  --leading-snug: 1.4;
  --leading-body: 1.65;

  --tracking-display: -0.035em;
  --tracking-heading: -0.022em;
  --tracking-tight: -0.01em;
  --tracking-label: 0.09em;

  /* ---------- Spacing (Tailwind 1 = 0.25rem) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Radius ---------- */
  --radius: 0.25rem;      /* every box: buttons, panels, tags, focus ring */
  --radius-full: 9999px;  /* status dot only */

  /* ---------- Layout ---------- */
  --wrap-max: 76rem;
  --measure: 68ch;
  --tap: 2.75rem;         /* 44px minimum target */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 250ms;
}

/* ---------- Light ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #f2f3f5;          /* page: cool off-white (not #fff) */
    --color-surface: #fbfbfc;     /* raised panels */
    --color-surface-hover: #ffffff;
    --color-rule: #d8dce2;
    --color-rule-strong: #7b8492;
    --color-text: #0f1218;
    --color-muted: #4b5563;       /* 6.9:1 on bg */
    --color-faint: #5b6472;       /* 5.5:1 on bg */
    --color-accent: #a34a06;      /* deep amber, 5.4:1 on bg */
    --color-accent-hover: #7c3a07;
    --color-on-accent: #ffffff;
    --color-signal: #047857;
    --color-todo: #5b6472;
    --color-todo-line: #9aa2ae;
    --color-selection: rgb(163 74 6 / 0.18);
    --shadow-panel: 0 1px 2px rgb(15 18 24 / 0.04);

    --hc-bg: #ffffff;
    --hc-surface: #ffffff;
    --hc-surface-hover: #f2f2f2;
    --hc-rule: #595959;
    --hc-rule-strong: #000000;
    --hc-text: #000000;
    --hc-muted: #1f2937;
    --hc-faint: #1f2937;
    --hc-accent: #7c2d12;
    --hc-accent-hover: #431407;
    --hc-on-accent: #ffffff;
    --hc-signal: #065f46;
    --hc-todo: #1f2937;
    --hc-todo-line: #1f2937;

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --color-bg: #f2f3f5;
  --color-surface: #fbfbfc;
  --color-surface-hover: #ffffff;
  --color-rule: #d8dce2;
  --color-rule-strong: #7b8492;
  --color-text: #0f1218;
  --color-muted: #4b5563;
  --color-faint: #5b6472;
  --color-accent: #a34a06;
  --color-accent-hover: #7c3a07;
  --color-on-accent: #ffffff;
  --color-signal: #047857;
  --color-todo: #5b6472;
  --color-todo-line: #9aa2ae;
  --color-selection: rgb(163 74 6 / 0.18);
  --shadow-panel: 0 1px 2px rgb(15 18 24 / 0.04);

  --hc-bg: #ffffff;
  --hc-surface: #ffffff;
  --hc-surface-hover: #f2f2f2;
  --hc-rule: #595959;
  --hc-rule-strong: #000000;
  --hc-text: #000000;
  --hc-muted: #1f2937;
  --hc-faint: #1f2937;
  --hc-accent: #7c2d12;
  --hc-accent-hover: #431407;
  --hc-on-accent: #ffffff;
  --hc-signal: #065f46;
  --hc-todo: #1f2937;
  --hc-todo-line: #1f2937;

  color-scheme: light;
}

/* ---------- High contrast (on top of either theme) ---------- */
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --color-bg: var(--hc-bg);
    --color-surface: var(--hc-surface);
    --color-surface-hover: var(--hc-surface-hover);
    --color-rule: var(--hc-rule);
    --color-rule-strong: var(--hc-rule-strong);
    --color-text: var(--hc-text);
    --color-muted: var(--hc-muted);
    --color-faint: var(--hc-faint);
    --color-accent: var(--hc-accent);
    --color-accent-hover: var(--hc-accent-hover);
    --color-on-accent: var(--hc-on-accent);
    --color-signal: var(--hc-signal);
    --color-todo: var(--hc-todo);
    --color-todo-line: var(--hc-todo-line);
    --shadow-panel: none;
  }
}

:root[data-contrast="more"] {
  --color-bg: var(--hc-bg);
  --color-surface: var(--hc-surface);
  --color-surface-hover: var(--hc-surface-hover);
  --color-rule: var(--hc-rule);
  --color-rule-strong: var(--hc-rule-strong);
  --color-text: var(--hc-text);
  --color-muted: var(--hc-muted);
  --color-faint: var(--hc-faint);
  --color-accent: var(--hc-accent);
  --color-accent-hover: var(--hc-accent-hover);
  --color-on-accent: var(--hc-on-accent);
  --color-signal: var(--hc-signal);
  --color-todo: var(--hc-todo);
  --color-todo-line: var(--hc-todo-line);
  --shadow-panel: none;
}