/* Iron and Wind design tokens. Source of truth: Figma file "Iron-Wind" (7kLLvahsz1rldGqu6WLqrg).
   Values are v0.1 placeholders. Fonts: Playfair Display (600/700/900), Roboto Mono (300/400), both on Google Fonts. */

:root {
  /* Primitives */
  --iron-900: #0E0E0F;
  --iron-800: #171717;
  --iron-700: #202020;
  --ash-600: #3A3A3C;
  --ash-500: #676869;
  --ash-400: #ABACAD;
  --ash-300: #D9D9DA;
  --bone-100: #F1EEE6;
  --bone-50: #FAF8F3;
  --white: #FFFFFF;
  --spark-600: #C94420;
  --spark-500: #E8532B;
  --spark-300: #F59274;

  /* Semantic colour: Light */
  --color-bg-page: var(--bone-50);
  --color-bg-surface: var(--bone-100);
  --color-bg-inverse: var(--iron-900);
  --color-text-primary: var(--iron-800);
  --color-text-muted: var(--ash-500);
  --color-text-inverse: var(--bone-50);
  --color-border-default: var(--ash-300);
  --color-border-strong: var(--ash-400);
  --color-accent-default: var(--spark-500);
  --color-accent-hover: var(--spark-600);
  --color-focus-ring: var(--spark-500);

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-full: 9999px;

  /* Typography */
  --font-family-display: "Playfair Display", serif;
  --font-family-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;
  --font-size-96: 96px;

  /* Layout */
  --container-max: 1200px;
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1280px;
}

/* Semantic colour: Dark */
:root[data-theme="dark"] {
  --color-bg-page: var(--iron-900);
  --color-bg-surface: var(--iron-800);
  --color-bg-inverse: var(--bone-50);
  --color-text-primary: var(--bone-50);
  --color-text-muted: var(--ash-400);
  --color-text-inverse: var(--iron-900);
  --color-border-default: var(--ash-600);
  --color-border-strong: var(--ash-500);
  --color-accent-hover: var(--spark-300);
  --color-focus-ring: var(--spark-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-page: var(--iron-900);
    --color-bg-surface: var(--iron-800);
    --color-bg-inverse: var(--bone-50);
    --color-text-primary: var(--bone-50);
    --color-text-muted: var(--ash-400);
    --color-text-inverse: var(--iron-900);
    --color-border-default: var(--ash-600);
    --color-border-strong: var(--ash-500);
    --color-accent-hover: var(--spark-300);
    --color-focus-ring: var(--spark-300);
  }
}

/* Text styles */
.text-display-xl { font: 900 var(--font-size-96)/100px var(--font-family-display); letter-spacing: -0.02em; text-transform: lowercase; }
.text-display-l { font: 700 var(--font-size-64)/68px var(--font-family-display); letter-spacing: -0.01em; text-transform: lowercase; }
.text-heading-1 { font: 700 var(--font-size-40)/46px var(--font-family-display); text-transform: lowercase; }
.text-heading-2 { font: 600 var(--font-size-28)/34px var(--font-family-display); text-transform: lowercase; }
.text-heading-3 { font: 600 var(--font-size-20)/26px var(--font-family-display); text-transform: lowercase; }
.text-body-l { font: 300 var(--font-size-16)/26px var(--font-family-mono); }
.text-body-m { font: 300 var(--font-size-14)/22.4px var(--font-family-mono); }
.text-body-s { font: 300 var(--font-size-12)/19px var(--font-family-mono); }
.text-label { font: 400 var(--font-size-12)/12px var(--font-family-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Mobile text styles (below 768px). Heading 3, body and label keep their desktop size. */
@media (max-width: 767.98px) {
  .text-display-xl { font-size: var(--font-size-48); line-height: 52px; }
  .text-display-l { font-size: var(--font-size-40); line-height: 44px; }
  .text-heading-1 { font-size: var(--font-size-32); line-height: 38px; }
  .text-heading-2 { font-size: var(--font-size-24); line-height: 30px; }
}