/* Alta Resources -- token layer.
 *
 * Every colour, space, radius and type step the shell uses is declared here
 * once. Components reference tokens only; no component file names a raw
 * colour. That is what makes the dark scheme a token swap rather than a
 * second stylesheet.
 *
 * Theme resolution, in order:
 *   1. :root                                  -- light, the complete palette
 *   2. prefers-color-scheme: dark             -- unless light is forced
 *   3. [data-theme="dark"] / [data-theme="light"]  -- an explicit choice wins
 *
 * Every token has its value defined on bare :root. The dark blocks only
 * redefine; they never introduce a token that light lacks.
 */

:root {
  /* ---- neutrals -------------------------------------------------------- */
  --alta-surface: #ffffff;
  --alta-surface-sunken: #f6f7f9;
  --alta-surface-raised: #ffffff;
  --alta-surface-hover: #f0f2f5;
  --alta-surface-selected: #e8edf5;

  --alta-border: #dfe3e8;
  --alta-border-strong: #c3cad3;
  --alta-border-focus: #2f6fb5;

  --alta-text: #1b1f24;
  --alta-text-muted: #5b6672;
  --alta-text-faint: #8792a0;
  --alta-text-inverted: #ffffff;

  /* ---- accents --------------------------------------------------------- */
  --alta-accent: #2f6fb5;
  --alta-accent-hover: #255a94;
  --alta-accent-quiet: #eaf1f9;

  --alta-positive: #2c6e49;
  --alta-positive-quiet: #e8f2ec;
  --alta-caution: #8a5a00;
  --alta-caution-quiet: #f8f0dd;
  --alta-critical: #9b2c2c;
  --alta-critical-quiet: #fbeaea;

  /* ---- type ------------------------------------------------------------ */
  --alta-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --alta-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --alta-text-xs: 0.75rem;
  --alta-text-sm: 0.8125rem;
  --alta-text-base: 0.875rem;
  --alta-text-lg: 1rem;
  --alta-text-xl: 1.25rem;

  --alta-leading-tight: 1.25;
  --alta-leading-normal: 1.5;

  --alta-weight-normal: 400;
  --alta-weight-medium: 500;
  --alta-weight-strong: 600;

  /* ---- space ----------------------------------------------------------- */
  --alta-space-1: 0.25rem;
  --alta-space-2: 0.5rem;
  --alta-space-3: 0.75rem;
  --alta-space-4: 1rem;
  --alta-space-5: 1.5rem;
  --alta-space-6: 2rem;

  /* ---- shape ----------------------------------------------------------- */
  --alta-radius-sm: 3px;
  --alta-radius: 5px;
  --alta-radius-pill: 999px;

  --alta-shadow-raised: 0 1px 2px rgba(27, 31, 36, 0.08),
    0 2px 8px rgba(27, 31, 36, 0.06);

  /* ---- layout ---------------------------------------------------------- */
  --alta-nav-width: 13.5rem;
  --alta-header-height: 3.25rem;
  --alta-content-max: 76rem;

  /* ---- motion ---------------------------------------------------------- */
  --alta-transition: 120ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --alta-surface: #161a1f;
    --alta-surface-sunken: #101317;
    --alta-surface-raised: #1c2127;
    --alta-surface-hover: #222831;
    --alta-surface-selected: #26313d;

    --alta-border: #2c333c;
    --alta-border-strong: #3d4650;
    --alta-border-focus: #7fb0e6;

    --alta-text: #e6e9ed;
    --alta-text-muted: #a3adba;
    --alta-text-faint: #7b8695;
    --alta-text-inverted: #101317;

    --alta-accent: #7fb0e6;
    --alta-accent-hover: #9cc4ef;
    --alta-accent-quiet: #1e2937;

    --alta-positive: #7fc4a0;
    --alta-positive-quiet: #1a2822;
    --alta-caution: #d9b168;
    --alta-caution-quiet: #2a2418;
    --alta-critical: #e79a9a;
    --alta-critical-quiet: #2b1c1c;

    --alta-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --alta-surface: #161a1f;
  --alta-surface-sunken: #101317;
  --alta-surface-raised: #1c2127;
  --alta-surface-hover: #222831;
  --alta-surface-selected: #26313d;

  --alta-border: #2c333c;
  --alta-border-strong: #3d4650;
  --alta-border-focus: #7fb0e6;

  --alta-text: #e6e9ed;
  --alta-text-muted: #a3adba;
  --alta-text-faint: #7b8695;
  --alta-text-inverted: #101317;

  --alta-accent: #7fb0e6;
  --alta-accent-hover: #9cc4ef;
  --alta-accent-quiet: #1e2937;

  --alta-positive: #7fc4a0;
  --alta-positive-quiet: #1a2822;
  --alta-caution: #d9b168;
  --alta-caution-quiet: #2a2418;
  --alta-critical: #e79a9a;
  --alta-critical-quiet: #2b1c1c;

  --alta-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
}