/* Design tokens for The Indian Queen
 *
 * GENERATED FILE — do not edit.
 * Source: docs/03_UI_Style_Guide.md (frontmatter)
 * Rebuild: python execution/build_tokens.py
 * Generated: 12 September 2026, 03:05
 *
 * Layer order is declared once, here, and determines precedence regardless of
 * source order or selector specificity. A utility always beats a component, a
 * component always beats a base element style, and !important is never needed.
 */

@layer reset, base, layout, components, utilities;

:root {
  /* Tells the browser which themes this site handles. Without it, mobile
   * browsers may force-darken the page themselves, which inverts text and
   * backgrounds but leaves images alone, and looks broken. */
  color-scheme: light;

  /* Brand and neutral palette: raw values, referenced only by the semantic tokens below. Components must never use these directly. */
  --brand-identity: #6b1828;
  --brand-action: #d6b566;
  --brand-action-hover: #e4c779;
  --brand-focus: #7b1f35;
  --brand-focus-inverse: #f0d58f;
  --neutral-000: #fffdf7;
  --neutral-100: #f5eddf;
  --neutral-300: #c9bca7;
  --neutral-600: #655c51;
  --neutral-900: #171411;

  /* Semantic colour: what components reference. Named by role, so dark mode and rebrands change values here only. */
  --color-identity: var(--brand-identity);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-inverse: var(--neutral-000);
  --color-text-inverse-muted: var(--neutral-300);
  --color-surface: var(--neutral-000);
  --color-surface-sunken: var(--neutral-100);
  --color-surface-inverse: var(--neutral-900);
  --color-border: var(--neutral-300);
  --color-action: var(--brand-action);
  --color-action-hover: var(--brand-action-hover);
  --color-action-label: var(--neutral-900);
  --color-focus: var(--brand-focus);
  --color-focus-on-inverse: var(--brand-focus-inverse);

  /* Typography. Fluid steps use clamp(min, preferred, max) and need no media queries. */
  --font-body: 'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.20rem, 1.11rem + 0.45vw, 1.50rem);
  --step-2: clamp(1.44rem, 1.29rem + 0.75vw, 2.00rem);
  --step-3: clamp(1.73rem, 1.49rem + 1.20vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.71rem + 1.82vw, 3.55rem);
  --leading-tight: 1.15;
  --leading-body: 1.55;
  --measure: 68ch;

  /* Spacing: one proportional scale for margin, padding and gap. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);

  /* Radius: named by role so the same value serves cards, alerts and modals. */
  --radius-surface-sm: 6px;
  --radius-surface-md: 12px;
  --radius-surface-lg: 20px;
  --radius-pill: 999px;

  /* Motion. All of it is disabled under prefers-reduced-motion below. */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout. */
  --container-max: 72rem;
  --gutter: var(--space-m);
  --aspect-video: 16 / 9;
  --aspect-portrait: 9 / 16;
  --aspect-square: 1 / 1;

  /* Stacking order. Components reference these; never a raw number. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-commsbar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}


@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--step-0) / var(--leading-body) var(--font-body);
  }

  h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }

  p, li { max-width: var(--measure); }

  a { color: var(--color-action); }
  a:hover { color: var(--color-action-hover); }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  img, video { max-width: 100%; height: auto; }

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