/* Atelier: warm paper, graphite ink, Clarity City, rounded controls and shadowless panels.
   Vermilion marks commit and live actions; other colour is reserved for state and selection. */
@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; scrollbar-gutter: stable; }
  body { min-height: 100dvh; line-height: 1.5; }
  h1, h2, h3, h4, h5, h6 { hyphens: auto; text-wrap: balance; line-height: 1.2; }
  p, li, td, th, label, span, blockquote { overflow-wrap: break-word; }
  p { text-wrap: pretty; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; text-align: inherit; }
  ul, ol { list-style: none; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Scale: Major Third — a dense application, not an editorial page */
    --ratio: 1.25;
    --base: 1rem;
    --baseline: 1.5rem;

    --text-xs: 0.75rem;                                  /* labels only */
    --text-sm: 0.875rem;                                 /* metadata */
    --text-md: var(--base);                              /* 16 */
    --text-lg: calc(var(--base) * 1.25);                 /* 20 */
    --text-xl: calc(var(--base) * 1.5625);               /* 25 */
    --text-2xl: calc(var(--base) * 1.953);               /* 31 */
    --text-3xl: calc(var(--base) * 2.441);               /* 39 */

    /* Roles share one scale across pages; display size never leaks into dense content. */
    --type-page-title: clamp(2rem, 3.1vw, 2.5rem);
    --type-section-title: 1.5rem;
    --type-card-title: 1.25rem;
    --type-lead: 1.125rem;
    --type-title-leading: 1.2;
    --type-title-tracking: -.025em;

    --space-1: calc(var(--baseline) * 0.25);   /* 6 */
    --space-2: calc(var(--baseline) * 0.5);    /* 12 */
    --space-3: var(--baseline);                 /* 24 */
    --space-4: calc(var(--baseline) * 1.5);    /* 36 */
    --space-5: calc(var(--baseline) * 2);      /* 48 */
    --space-6: calc(var(--baseline) * 3);      /* 72 */

    /* Atelier: warm paper canvas, near-white sheets, graphite ink (direction 05, Peter 2026-10-07). */
    --neutral-0: oklch(0.992 0.004 80);
    --neutral-50: oklch(0.962 0.011 78);
    --neutral-100: oklch(0.93 0.014 76);
    --neutral-200: oklch(0.86 0.014 74);
    --neutral-300: oklch(0.6 0.006 70);
    --neutral-500: oklch(0.52 0.006 70);
    --neutral-600: oklch(0.43 0.005 70);
    --neutral-800: oklch(0.3 0.005 70);
    --neutral-900: oklch(0.21 0.004 70);

    --ink-500: oklch(0.21 0.004 70);
    --ink-600: oklch(0.15 0.004 70);
    --ink-100: oklch(0.88 0.012 76);
    --ink-50: oklch(0.95 0.01 78);
    --counter-500: oklch(0.43 0.005 70);
    --counter-50: oklch(0.95 0.01 78);

    /* Vermilion is the one live colour: commit actions and live state only. */
    --action-live: oklch(0.58 0.19 36);
    --action-live-hover: oklch(0.52 0.18 36);
    --on-action-live: oklch(0.99 0.01 60);
    --attention: oklch(0.7 0.13 72);
    /* Answer hues for simulations: matched to the vermilion's lightness (Peter's pick). */
    --data-a: oklch(0.58 0.1 250);
    --data-b: oklch(0.6 0.1 155);
    --data-c: oklch(0.58 0.14 350);
    --data-d: oklch(0.66 0.11 75);
    --data-e: oklch(0.45 0.02 60);

    /* Small semantic signals; labels and shapes still carry their meaning. */
    /* Tones matched to the vermilion's lightness (Peter's pick), darkened where they carry text. */
    --signal-positive: oklch(0.5 0.09 155);
    --signal-activity: oklch(0.5 0.1 250);
    --signal-review: oklch(0.47 0.1 65);
    --signal-negative: oklch(0.52 0.15 25);
    --selection: var(--signal-activity);
    --selection-subtle: oklch(0.95 0.02 250);
    --outcome-yes: var(--signal-positive);
    --outcome-if: var(--signal-review);
    --outcome-no: var(--signal-negative);
    --outcome-unclear: oklch(0.8 0.02 75);

    /* Semantic */
    --surface-page: var(--neutral-50);
    --surface-raised: var(--neutral-0);
    --surface-sunken: var(--neutral-100);
    --surface-control: oklch(0.95 0.01 78);
    --surface-navigation: oklch(0.2 0.004 70);
    --on-navigation: oklch(0.95 0.01 75);
    --on-navigation-muted: oklch(0.72 0.008 70);
    --navigation-active: oklch(0.29 0.005 70);
    --navigation-line: oklch(0.45 0.005 70);
    --surface-emphasis: var(--neutral-800);
    --on-emphasis: var(--neutral-0);
    --on-emphasis-muted: oklch(0.86 0.01 75);
    --on-surface: var(--neutral-900);
    --on-surface-muted: var(--neutral-600);
    --on-surface-faint: var(--neutral-500);
    --line: var(--neutral-200);
    --line-strong: var(--neutral-300);
    --accent: var(--ink-500);
    --accent-hover: var(--ink-600);
    --on-accent: var(--neutral-0);
    --accent-subtle: var(--ink-50);
    --accent-soft: var(--ink-100);
    --counter: var(--counter-500);
    --counter-subtle: var(--counter-50);
    --error: var(--signal-negative);
    --error-subtle: oklch(0.95 0.025 25);

    --font-sans: 'Clarity City', system-ui, sans-serif;
    --font-heading: var(--font-sans);
    /* Three voices: the product (sans), a persona speaking (serif), provenance and metadata (mono). */
    --font-voice: 'Instrument Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    --shadow-card: none;
    --shadow-pop: none;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-enter: cubic-bezier(0, 0, 0, 1);
    --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);

    --z-action-bar: 2;
    --z-switch: 500;
    --z-modal: 1000;
  }
}

@layer base {
  h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
  body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--on-surface);
    background: var(--surface-page);
    font-variant-numeric: tabular-nums;
  }
  :focus-visible { outline: 2px solid var(--selection); outline-offset: 2px; border-radius: var(--radius-sm); }
  /* Component display rules must never un-hide an element toggled with the hidden attribute. */
  [hidden] { display: none !important; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}