/* GENERATED COPY — source: entropy-design-site/css/tokens.css
   Do not edit here. Run `npm run sync` to refresh. */

/* ============================================================
   Entropy Design — Design Tokens
   ----------------------------------------------------------------
   Single source of truth for colour, typography, spacing, motion.
   Reference these tokens everywhere; never hardcode values.
   See: resources - build/02-design-tokens.md
   ============================================================ */

/* ============================================================
   @font-face declarations
   ----------------------------------------------------------------
   All four typefaces self-hosted as woff2.
   Currently single weight per family — additional weights
   (Neue Machina Bold, Raptor Medium/Semibold, Monoska Medium)
   pending source files. Browser will faux-bold/medium until
   real weight files arrive.
   ============================================================ */

@font-face {
  font-family: 'Glamorez';
  src: url('/Fonts/glamorez.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Machina';
  src: url('/Fonts/neue-machina-regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monoska';
  src: url('/Fonts/monoska.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raptor 3';
  src: url('/Fonts/raptor-regular.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   :root — LIGHT MODE TOKENS (default)
   ============================================================ */

:root {

  /* ============================================
     COLOUR
     ============================================ */
  --ink: #0A0A0A;
  --paper: #FAFAFA;
  --paper-grey: #EDEDED;
  --paper-tint: #F4F1ED;
  --bone: #D6D3CD;

  --accent: #E85D04;
  --accent-hover: #C44A02;
  --accent-soft: #FCEDE4;

  /* Status colours (sparing use) */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #6366F1;

  /* Semantic surface tokens */
  --bg-primary: var(--paper);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: var(--paper-grey);
  --border-subtle: var(--bone);
  --border-strong: #B5B0A6;
  --text-primary: var(--ink);
  --text-secondary: #525252;
  --text-tertiary: #A0A0A0;

  /* ============================================
     TYPOGRAPHY — FONT FAMILIES
     ============================================ */
  --font-statement: 'Glamorez', Georgia, 'Times New Roman', serif;
  --font-display: 'PP Neue Machina', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Raptor 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Monoska', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ============================================
     TYPOGRAPHY — TYPE SCALE (desktop)
     ============================================ */
  --fs-display-xl: 9rem;       /* 144px — hero standout */
  --fs-display-lg: 6rem;       /* 96px  — page titles */
  --fs-display-md: 4rem;       /* 64px  — major section openers */
  --fs-h1: 3rem;               /* 48px */
  --fs-h2: 2.25rem;            /* 36px */
  --fs-h3: 1.5rem;             /* 24px */
  --fs-body-lg: 1.25rem;       /* 20px */
  --fs-body: 1rem;             /* 16px */
  --fs-body-sm: 0.875rem;      /* 14px */
  --fs-mono-lg: 0.875rem;      /* 14px — section labels, form labels */
  --fs-mono: 0.75rem;          /* 12px — annotations */
  --fs-mono-sm: 0.6875rem;     /* 11px — registration marks */

  /* Line heights — display type is tight so the utility-word stack
     reads as a unified block that Glamorez can punch through */
  --lh-display-xl: 0.92;
  --lh-display-lg: 0.95;
  --lh-display-md: 1.0;
  --lh-h1: 1.167;
  --lh-h2: 1.222;
  --lh-h3: 1.333;
  --lh-body-lg: 1.6;
  --lh-body: 1.75;
  --lh-body-sm: 1.571;
  --lh-mono-lg: 1.429;
  --lh-mono: 1.5;
  --lh-mono-sm: 1.455;

  /* Letter spacing — tighter on uppercase Neue Machina so the
     utility words read as a dense block, not three separate words */
  --ls-display: -0.05em;       /* -5% on uppercase display type */
  --ls-h: -0.03em;             /* -3% on uppercase headings */
  --ls-body: 0;
  --ls-mono: 0.01em;
  --ls-uppercase: 0.05em;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============================================
     SPACING (8px base scale)
     ============================================ */
  --space-1: 0.25rem;          /* 4px */
  --space-2: 0.5rem;           /* 8px */
  --space-3: 0.75rem;          /* 12px */
  --space-4: 1rem;             /* 16px */
  --space-5: 1.5rem;           /* 24px */
  --space-6: 2rem;             /* 32px */
  --space-7: 3rem;             /* 48px */
  --space-8: 4rem;             /* 64px */
  --space-9: 6rem;             /* 96px */
  --space-10: 8rem;            /* 128px */
  --space-11: 12rem;           /* 192px */

  /* Containers */
  --container-max: 1440px;
  --container-narrow: 880px;
  --container-text: 640px;

  /* Page gutters */
  --page-margin-desktop: 4rem;       /* 64px */
  --page-margin-tablet: 3rem;        /* 48px */
  --page-margin-mobile: 1rem;        /* 16px */

  /* Card / component padding */
  --card-padding-desktop: 2rem;      /* 32px */
  --card-padding-mobile: 1.5rem;     /* 24px */

  /* ============================================
     BORDERS & RADII
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* ============================================
     SHADOWS (light mode only — disabled in dark)
     ============================================ */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ============================================
     MOTION
     ============================================ */

  /* Durations */
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 220ms;
  --dur-medium: 320ms;
  --dur-slow: 450ms;
  --dur-slower: 600ms;
  --dur-hero: 900ms;

  /* Easings */
  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 1;
  --z-elevated: 10;
  --z-nav: 100;
  --z-modal-backdrop: 200;
  --z-modal: 201;
  --z-toast: 300;
  --z-cursor: 9999;

  /* ============================================
     ACCENT GLOWS & FOCUS RINGS
     ============================================ */
  --accent-glow: rgba(232, 93, 4, 0.08);
  --accent-glow-strong: rgba(232, 93, 4, 0.15);
  --focus-ring: 0 0 0 3px var(--accent-glow);

  /* Set base colour scheme for browser UI (scrollbars etc.) */
  color-scheme: light;
}

/* ============================================================
   :root[data-theme="dark"] — DARK MODE OVERRIDES
   ============================================================ */

:root[data-theme="dark"] {
  --ink: #F5F5F5;
  --paper: #0A0A0A;
  --paper-grey: #141414;
  --paper-tint: #1C1C1C;
  --bone: #2A2A2A;

  --accent: #E85D04;
  --accent-hover: #FF6E1A;
  --accent-soft: rgba(232, 93, 4, 0.12);

  --bg-primary: var(--paper);
  --bg-secondary: var(--paper-grey);
  --bg-tertiary: var(--paper-tint);
  --border-subtle: var(--bone);
  --border-strong: #3A3A3A;
  --text-primary: var(--ink);
  --text-secondary: #A0A0A0;
  --text-tertiary: #666666;

  --shadow-subtle: none;
  --shadow-card: none;
  --shadow-elevated: none;

  color-scheme: dark;
}

/* ============================================================
   RESPONSIVE TYPE SCALE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --fs-display-xl: 4rem;       /* 64px */
    --fs-display-lg: 3.5rem;     /* 56px */
    --fs-display-md: 2.5rem;     /* 40px */
    --fs-h1: 2rem;               /* 32px */
    --fs-h2: 1.5rem;             /* 24px */
    --fs-h3: 1.25rem;            /* 20px */
    --fs-body-lg: 1.125rem;      /* 18px */
    --fs-body: 1rem;             /* 16px */

    --page-margin-desktop: var(--page-margin-mobile);
    --card-padding-desktop: var(--card-padding-mobile);
  }
}