/*
 * base.css — palette + foundation. Dracula bg with Monokai yellow + Dracula cyan accents.
 * Purpose: cascade layers, reset, palette tokens, type stack, motion preferences.
 * Dependencies: none. Loaded before any mode token sheet.
 * Invariants: defines @layer order ONCE; modes only set --accent and font.
 *             Color tokens live here; modes do NOT redefine palette.
 * Non-goals: no component CSS, no mode-specific selectors.
 */

@layer reset, tokens, base, modes, components, features;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
  body, h1, h2, h3, p, ul, ol, figure, blockquote, pre { margin: 0; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  :focus-visible { outline: 2px solid color-mix(in oklab, var(--cyan) 70%, var(--fg)); outline-offset: 2px; }
}

@layer tokens {
  :root {
    /* Dracula */
    --bg:      #282a36;
    --bg-soft: #2f3141;
    --bg-sunk: #21222c;
    --rule:    #44475a;
    --fg:      #f8f8f2;
    --muted:   #6272a4;
    --pink:    #ff79c6;
    --green:   #50fa7b;
    --purple:  #bd93f5;
    --cyan:    #8be9fd;
    /* Monokai */
    --yellow:  #e6db74;
    --orange:  #fd971f;

    --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;

    --u: 8px;
    --measure: 64ch;

    /* Fibonacci type scale — used everywhere a display size is set. */
    --t-1: 1em;
    --t-2: 2em;
    --t-3: 3em;
    --t-5: 5em;
    --t-8: 8em;
    --t-13: 13em;
  }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    container-type: inline-size;
    min-height: 100dvh;
    font-family: var(--sans);
    line-height: 1.55;
  }
  a { color: inherit; }
  code { font-family: var(--mono); font-size: 0.95em; }
  noscript p {
    display: block;
    padding: var(--u) calc(var(--u)*2);
    border-left: 3px solid var(--yellow);
    color: var(--muted);
    margin: calc(var(--u)*2);
    font-family: var(--mono);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}