@import "navy-reference/fonts.css";
@import "navy-reference/tokens.css";
@import "navy-reference/components.css";

/* App aliases and reader defaults. Exact reference tokens stay in navy-reference. */
:root {
  color-scheme: light;
  --sans: var(--navy-font);
  --mono: var(--navy-font);
  --cream: var(--color-background);
  --cream-panel: #fff;
  --cream-deep: var(--color-mist);
  --ink: var(--color-foreground);
  --ink-soft: var(--color-muted-foreground);
  --ink-faint: oklch(52% .03 275);
  --line-ink: var(--color-border);
  --line-ink-2: oklch(86% .025 275);
  --accent: var(--color-primary);
  --text-accent: var(--color-primary);
}

/* The public reference is light. These dark reader surfaces are app-specific. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-background: #000;
    --color-foreground: #f5f5f5;
    --color-muted-foreground: #bcbcbc;
    --color-faint-foreground: #999;
    --color-muted: #141414;
    --color-border: #282828;
    --color-input: #666;
    --color-mist: #191919;
    --color-lilac: oklch(31% .07 280);
    --color-frost: oklch(29% .045 245);
    --cream-panel: #000;
    --ink-faint: #aaa;
    --line-ink-2: #3d3d3d;
    --text-accent: oklch(78% .13 268);
  }
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--sans); line-height: 1.5; background: var(--cream); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: var(--text-accent); text-decoration: none; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--sans); font-weight: 400; letter-spacing: -.025em; }
input, select, textarea { font: inherit; color: var(--ink); }
input::placeholder { color: var(--ink-faint); opacity: 1; }
details { border-top: 1px solid var(--line-ink); padding-block: 12px; }
summary { cursor: pointer; font-weight: 500; }
details[open] > summary { margin-bottom: 12px; }
:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
::selection { background: var(--color-lilac); color: var(--ink); }