/* base.css — reset + tokens */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Fluid type */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1rem + 6vw, 6.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.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;

  /* Radii */
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow:680px;
  --content-default:1080px;
  --content-wide:1280px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* === Light Mode === Asphalt / off-white / safety amber + teal data === */
:root,
[data-theme="light"]{
  --color-bg:#f4f3ef;             /* warm off-white */
  --color-surface:#fbfaf6;
  --color-surface-2:#ffffff;
  --color-surface-offset:#ece9e2;
  --color-surface-offset-2:#e3dfd6;
  --color-divider:#d8d4c9;
  --color-border:#c9c4b7;

  --color-text:#1c1f23;           /* asphalt near-black */
  --color-text-muted:#5b5f66;
  --color-text-faint:#8f9299;
  --color-text-inverse:#fbfaf6;

  /* Asphalt — neutral slate used as deep surface and dark accent */
  --color-asphalt:#1c1f23;
  --color-asphalt-2:#2a2e34;
  --color-asphalt-3:#3a3f47;

  /* Primary: Safety Amber */
  --color-primary:#d97a0a;
  --color-primary-hover:#b86208;
  --color-primary-active:#8c4906;
  --color-primary-highlight:#f4dcb6;

  /* Data accent: Steel Teal */
  --color-data:#1f6f7a;
  --color-data-hover:#175661;
  --color-data-highlight:#cfe0e3;

  /* Status */
  --color-success:#3f7a3a;
  --color-warning:#c97607;
  --color-error:#a83232;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20,22,26,.06);
  --shadow-md: 0 6px 18px rgba(20,22,26,.08);
  --shadow-lg: 0 18px 44px rgba(20,22,26,.14);

  /* Grid/diagram strokes */
  --color-grid: rgba(28,31,35,.08);
  --color-grid-strong: rgba(28,31,35,.18);
}

[data-theme="dark"]{
  --color-bg:#0e1013;
  --color-surface:#14171b;
  --color-surface-2:#191d22;
  --color-surface-offset:#1d2127;
  --color-surface-offset-2:#22272d;
  --color-divider:#262b31;
  --color-border:#33393f;

  --color-text:#e9e8e3;
  --color-text-muted:#9aa0a7;
  --color-text-faint:#6c7178;
  --color-text-inverse:#14171b;

  --color-asphalt:#e9e8e3;
  --color-asphalt-2:#cfd2d6;
  --color-asphalt-3:#9aa0a7;

  --color-primary:#f2a13a;
  --color-primary-hover:#ffb957;
  --color-primary-active:#ffcd86;
  --color-primary-highlight:#3b2c14;

  --color-data:#5cb0bb;
  --color-data-hover:#7cc6cf;
  --color-data-highlight:#1c3236;

  --color-success:#7fb56b;
  --color-warning:#e0a045;
  --color-error:#d97070;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);

  --color-grid: rgba(233,232,227,.06);
  --color-grid-strong: rgba(233,232,227,.18);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --color-bg:#0e1013; --color-surface:#14171b; --color-surface-2:#191d22;
    --color-surface-offset:#1d2127; --color-surface-offset-2:#22272d;
    --color-divider:#262b31; --color-border:#33393f;
    --color-text:#e9e8e3; --color-text-muted:#9aa0a7; --color-text-faint:#6c7178;
    --color-text-inverse:#14171b;
    --color-asphalt:#e9e8e3; --color-asphalt-2:#cfd2d6; --color-asphalt-3:#9aa0a7;
    --color-primary:#f2a13a; --color-primary-hover:#ffb957; --color-primary-active:#ffcd86; --color-primary-highlight:#3b2c14;
    --color-data:#5cb0bb; --color-data-hover:#7cc6cf; --color-data-highlight:#1c3236;
    --color-grid: rgba(233,232,227,.06); --color-grid-strong: rgba(233,232,227,.18);
  }
}

html{
  -moz-text-size-adjust:none; -webkit-text-size-adjust:none; text-size-adjust:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  min-height:100dvh;
  line-height:1.6;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background-color:var(--color-bg);
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role="list"],ol[role="list"]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{
  text-wrap:balance; line-height:1.1;
  font-family:var(--font-display);
  letter-spacing:-.015em;
  font-weight:600;
}
p,li,figcaption{text-wrap:pretty;max-width:72ch}

::selection{background:rgba(217,122,10,.25);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

button{cursor:pointer;background:none;border:none;color:inherit}
table{border-collapse:collapse;width:100%}

a,button,[role="button"],input,textarea,select{
  transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}