:root {
  /* ============================================
     RUNDONE DESIGN TOKENS
     Single source of truth — Stepanov's principle:
     "Separate algorithms from data structures"
     Change values HERE, not in component CSS.
     ============================================ */

  /* === COLORS: Primary (Emerald) === */
  --primary: #1e6b5a;
  --primary-text: #18574a;
  --primary-btn: #1e6b5a;
  --primary-hover: #175e4d;
  --primary-active: #237a66;
  --primary-80: rgba(30, 107, 90, 0.8);
  --primary-60: rgba(30, 107, 90, 0.6);
  --primary-40: rgba(30, 107, 90, 0.4);
  --primary-30: rgba(30, 107, 90, 0.3);
  --primary-20: rgba(30, 107, 90, 0.2);
  --primary-10: rgba(30, 107, 90, 0.1);
  --primary-05: rgba(30, 107, 90, 0.05);

  /* === COLORS: Accent (Burnished Amber) === */
  --accent: #C17817;
  --accent-hover: #a86614;
  --accent-light: rgba(193, 120, 23, 0.15);

  /* === COLORS: Secondary === */
  --secondary: #f43f5e;
  --secondary-light: #fb7185;

  /* === COLORS: Backgrounds === */
  --bg-base: #fafaf9;
  --bg-surface: #ffffff;
  --bg-elevated: #f5f5f4;
  --bg-warm: #E8DDCF;
  --bg-warm-light: #f0e8dc;
  --bg-panel: rgba(245, 245, 244, 0.9);
  --bg-dark: #191919;
  --bg-glass: rgba(255, 255, 255, 0.7);

  /* === COLORS: Text === */
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --text-muted: #a8a29e;
  --text-on-primary: #ffffff;
  --text-on-dark: #ffffff;

  /* === COLORS: Borders === */
  --border-default: #e7e5e4;
  --border-strong: #d6d3d1;
  --border-muted: #78716c;
  --border-focus: var(--primary);

  /* === COLORS: Greyscale (5 levels) === */
  --grey-900: #1c1917;
  --grey-700: #44403c;
  --grey-500: #78716c;
  --grey-300: #d6d3d1;
  --grey-100: #f5f5f4;

  /* === COLORS: Functional === */
  --status-success: #16a34a;
  --status-success-bg: rgba(22, 163, 74, 0.1);
  --status-warning: #C17817;
  --status-warning-bg: rgba(193, 120, 23, 0.1);
  --status-error: #dc2626;
  --status-error-bg: rgba(220, 38, 38, 0.1);
  --status-info: #1e6b5a;
  --status-info-bg: rgba(30, 107, 90, 0.1);

  /* === TYPOGRAPHY: Font stacks === */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* === TYPOGRAPHY: Scale === */
  --text-display: clamp(3rem, 10vw, 6rem);
  --text-h1: clamp(2.25rem, 8vw, 4.5rem);
  --text-h2: clamp(1.75rem, 6vw, 3rem);
  --text-h3: clamp(1.5rem, 4vw, 2rem);
  --text-h4: clamp(1.25rem, 3vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-label: 0.75rem;
  --text-micro: 0.5rem;
  --text-micro-number: 0.4375rem;
  --text-micro-code: 0.375rem;
  --text-barcode: 0.4375rem;

  /* === TYPOGRAPHY: Weights === */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === SPACING: 8px base scale === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* === LAYOUT: Grid === */
  --grid-max-width: 74.625rem; /* 1194px */
  --grid-columns: 12;
  --grid-gutter: 1rem;
  --grid-cell-size: 2.5rem;

  /* === LAYOUT: Container === */
  --container-pad: 1rem;
  --section-pad-y: 4rem;
  --grid-gap: 1rem;

  /* === COMPONENTS: Cards === */
  --card-pad: 1.5rem;
  --card-gap: 1.5rem;
  --card-border: 1px solid var(--border-default);

  /* === COMPONENTS: Buttons === */
  --btn-pad-y: 0.75rem;
  --btn-pad-x: 1.5rem;
  --btn-pad-y-sm: 0.5rem;
  --btn-pad-x-sm: 1rem;
  --btn-pad-y-lg: 1rem;
  --btn-pad-x-lg: 2rem;
  --btn-height: 3.25rem;
  --btn-height-lg: 3.75rem;
  --btn-height-sm: 2.5rem;

  /* === COMPONENTS: Inputs === */
  --input-height: 3.25rem;
  --input-pad: 0.75rem 1rem;
  --input-border: 1px solid var(--border-default);
  --input-focus-border: 2px solid var(--primary);

  /* === COMPONENTS: Corner Frame (brand signature) === */
  --corner-frame-size: 1rem;      /* 16px length */
  --corner-frame-width: 4px;      /* border width */
  --corner-frame-offset: calc(-1 * var(--corner-frame-width) - 2px);

  /* === EFFECTS: Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 0.375rem -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem -3px rgba(0, 0, 0, 0.1);

  /* === EFFECTS: Glow === */
  --glow-soft: 0 0 0.625rem rgba(30, 107, 90, 0.3);
  --glow-medium: 0 0 1.25rem rgba(30, 107, 90, 0.5);
  --glow-strong: 0 0 1.875rem rgba(30, 107, 90, 0.7);

  /* === EFFECTS: Scanline === */
  --scanline-subtle-opacity: 0.2;
  --scanline-subtle-size: 3px;
  --scanline-standard-opacity: 0.2;
  --scanline-standard-size: 4px;
  --scanline-minimal-opacity: 0.1;
  --scanline-minimal-size: 6px;

  /* === EFFECTS: Grid Pattern === */
  --grid-pattern-fine: 1.25rem;    /* 20px */
  --grid-pattern-medium: 2.5rem;   /* 40px */
  --grid-pattern-large: 5rem;      /* 80px */
  --grid-pattern-fine-opacity: 0.2;
  --grid-pattern-medium-opacity: 0.15;
  --grid-pattern-large-opacity: 0.1;

  /* === EFFECTS: Glass === */
  --glass-blur: 0.75rem;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);

  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* === MOTION === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === BRAND: Logo === */
  --logo-width: 3rem;
  --logo-height: 2.5rem;
  --logo-min-width: 1.5rem;
  --logo-min-height: 1.25rem;
  --logo-clearspace: var(--space-md);

  /* === MISC === */
  --radius: 0;
  --header-height: 3.5rem;
  --footer-height: 3.5rem;
  --nav-dots-height: 2rem;
}

/* === RESPONSIVE OVERRIDES === */
@media (min-width: 641px) {
  :root {
    --container-pad: 2rem;
    --section-pad-y: 4rem;
    --card-pad: 1.5rem;
  }
}

@media (min-width: 1025px) {
  :root {
    --container-pad: 2rem;
    --section-pad-y: 4rem;
  }
}