/* RE Program Wiki — design tokens v0.1
   Stage 5: typography, spacing, geometry and responsive layout. */

:root {
  color-scheme: light;

  /* Brand colors */
  --color-navy-950: #071a36;
  --color-navy-900: #0b2447;
  --color-blue-700: #0b5bd3;
  --color-blue-800: #0848a6;
  --color-blue-500: #2f8cff;
  --color-blue-300: #8fc2ff;
  --color-blue-100: #dcebff;
  --color-blue-50: #f2f7ff;
  --color-ink: #12213a;
  --color-muted: #5a6a82;
  --color-line: #d7e2f0;
  --color-surface: #f7fafe;
  --color-paper: #ffffff;
  --color-visited: #5a46a8;

  /* Semantic colors */
  --color-success: #146c43;
  --color-success-bg: #e9f7ef;
  --color-warning: #8a4b00;
  --color-warning-bg: #fff4dd;
  --color-danger: #a6292a;
  --color-danger-bg: #fff0f0;

  /* Font families: local system stacks, no external request */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", ui-serif, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Fluid type scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-lead: clamp(1.125rem, 0.96rem + 0.72vw, 1.375rem);
  --font-size-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --font-size-h2: clamp(1.625rem, 1.34rem + 1.2vw, 2.25rem);
  --font-size-h1: clamp(2.25rem, 1.58rem + 2.85vw, 4rem);
  --font-size-display: clamp(2.75rem, 1.7rem + 4.45vw, 5.5rem);

  /* Line heights */
  --line-height-tight: 1.04;
  --line-height-heading: 1.16;
  --line-height-compact: 1.4;
  --line-height-body: 1.7;
  --line-height-lead: 1.55;

  /* Letter spacing */
  --tracking-tight: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.12em;

  /* Text measures */
  --measure-narrow: 48ch;
  --measure-lead: 62ch;
  --measure-article: 72ch;
  --measure-wide: 90ch;

  /* Four-pixel spacing rhythm */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Geometry */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-hero: 1.25rem;
  --radius-full: 999px;
  --border-width: 1px;
  --focus-width: 3px;

  /* Shadows are reserved for elevated surfaces */
  --shadow-sm: 0 2px 8px rgba(7, 26, 54, 0.06);
  --shadow-md: 0 12px 32px rgba(7, 26, 54, 0.1);
  --shadow-overlay: 0 24px 64px rgba(7, 26, 54, 0.18);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Interaction */
  --target-min: 2.75rem;
  --control-sm: 2.25rem;
  --control-md: 2.75rem;
  --control-lg: 3rem;
  --focus-ring: 0 0 0 var(--focus-width) var(--color-blue-500);

  /* Layout */
  --layout-max: 90rem;
  --header-height: 4.5rem;
  --sidebar-width: 16.5rem;
  --article-width: 47.5rem;
  --rail-width: 14rem;
  --layout-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  --page-gutter: clamp(1rem, 3vw, 2.25rem);
  --section-gap: clamp(3rem, 6vw, 5rem);

  /* Layers */
  --z-base: 0;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-dialog: 60;
  --z-toast: 80;
}

/* Compact desktop and tablet: right rail moves into the article. */
@media (max-width: 74.999rem) {
  :root {
    --sidebar-width: 15rem;
    --article-width: 50rem;
    --rail-width: 0rem;
    --layout-gap: clamp(1.25rem, 2.2vw, 2rem);
  }
}

/* Tablet: global sidebar becomes a drawer. */
@media (max-width: 59.999rem) {
  :root {
    --sidebar-width: 0rem;
    --article-width: 48rem;
    --header-height: 4rem;
    --page-gutter: clamp(1rem, 4vw, 2rem);
    --section-gap: clamp(2.75rem, 7vw, 4rem);
  }
}

/* Phone */
@media (max-width: 44.999rem) {
  :root {
    --article-width: 100%;
    --page-gutter: 1rem;
    --layout-gap: 1rem;
    --section-gap: 3rem;
    --radius-hero: 1rem;
  }
}

/* Narrow phone */
@media (max-width: 24.999rem) {
  :root {
    --page-gutter: 0.75rem;
    --font-size-lead: 1.125rem;
    --section-gap: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}