/* ==========================================================================
   Cliktron design tokens · v3.0 (12 Oct 2026, soft mono + orange)
   One source of truth for colour, type, spacing, radius, motion.
   Load fonts first: ../fonts/fonts.css
   ========================================================================== */
:root {
  /* ---- Colour v3 (12 Oct 2026): soft mono + Cliktron Orange ---- */
  --ck-carbon:   #141414;  /* PRIMARY · text on light, dark backgrounds, logo */
  --ck-paper:    #EFEFEC;  /* PRIMARY · light page background (60%) */
  --ck-white:    #FAFAF8;  /* PRIMARY · cards on Paper, text + logo on Carbon */
  --ck-orange:   #E85002;  /* ACCENT · Let's talk dot + one main button only */
  --ck-graphite: #1F1F1F;  /* cards and bands on Carbon */
  --ck-mist:     #D6D6D1;  /* lines and borders on light */
  --ck-line-dk:  #333333;  /* lines and borders on dark */
  --ck-slate:    #5C5C5C;  /* small text on light (5.8:1 on Paper) */
  --ck-steel:    #A7A7A7;  /* small text on dark (7.7:1 on Carbon) */
  --ck-sand:     #D9C3AB;  /* rare brown accent: dots, photo wash */

  /* Functional aliases (light theme) */
  --ck-bg:            var(--ck-paper);
  --ck-surface:       var(--ck-white);
  --ck-text:          var(--ck-carbon);
  --ck-text-muted:    var(--ck-slate);
  --ck-line:          var(--ck-mist);
  --ck-accent:        var(--ck-orange);
  --ck-on-accent:     var(--ck-carbon);   /* text on orange = Carbon, never white (4.9:1) */
  --ck-focus:         currentColor;
  --ck-state-error:   #B3261E;
  --ck-state-success: var(--ck-carbon);
  --ck-state-info:    var(--ck-slate);

  /* ---- Type ---- */
  --ck-font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif; /* headings */
  --ck-font-body:    "Outfit", ui-sans-serif, system-ui, sans-serif;          /* body, numbers */
  --ck-font-accent:  "Instrument Serif", Georgia, serif;                      /* ONE word, italic */
  --ck-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;        /* labels, // eyebrows */

  --ck-fs-h1:   clamp(2.5rem, 1.6rem + 4.2vw, 6rem);     /* 40 → 96 */
  --ck-fs-h2:   clamp(2rem, 1.5rem + 2.2vw, 3.5rem);     /* 32 → 56 */
  --ck-fs-h3:   clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);  /* 24 → 36 */
  --ck-fs-h4:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20 → 24 */
  --ck-fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --ck-fs-body: 1.0625rem;  /* 17 */
  --ck-fs-sm:   0.9375rem;  /* 15 */
  --ck-fs-xs:   0.8125rem;  /* 13 */
  --ck-fs-label: 0.8125rem; /* mono labels */
  --ck-fs-stat: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);

  --ck-lh-tight: 1.02;
  --ck-lh-head:  1.1;
  --ck-lh-body:  1.6;
  --ck-track-display: -0.03em;
  --ck-track-head:    -0.02em;
  --ck-weight-display: 500;  /* Red Hat Display Medium */
  --ck-weight-strong:  600;
  --ck-measure: 64ch;

  /* ---- Space (4px base) ---- */
  --ck-s-1: 4px;  --ck-s-2: 8px;  --ck-s-3: 12px; --ck-s-4: 16px;
  --ck-s-5: 24px; --ck-s-6: 32px; --ck-s-7: 48px; --ck-s-8: 64px;
  --ck-s-9: 96px; --ck-s-10: 128px;
  --ck-gutter: clamp(16px, 4vw, 48px);
  --ck-section-y: clamp(64px, 9vw, 128px);
  --ck-container: 1200px;
  --ck-container-narrow: 760px;

  /* ---- Shape ---- */
  --ck-radius-sm: 6px;
  --ck-radius:    8px;    /* buttons, inputs */
  --ck-radius-lg: 14px;   /* cards */
  --ck-radius-xl: 20px;   /* big panels, CTA blocks */
  --ck-radius-pill: 999px;
  --ck-border: 1px solid var(--ck-line);
  --ck-shadow: 0 1px 2px rgba(11,11,11,.06), 0 8px 24px rgba(11,11,11,.06); /* modal + menus only */

  /* ---- Motion ---- */
  --ck-ease: cubic-bezier(.2,.7,.2,1);
  --ck-ease-in-out: cubic-bezier(.65,0,.35,1);
  --ck-dur-fast: 150ms;
  --ck-dur: 250ms;
  --ck-dur-slow: 450ms;
  --ck-marquee-speed: 40s;

  /* ---- Layers ---- */
  --ck-z-header: 50; --ck-z-overlay: 90; --ck-z-modal: 100; --ck-z-toast: 110;

  /* ---- Icons ---- */
  --ck-icon: 24px; --ck-icon-sm: 20px; --ck-icon-stroke: 2;
}

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

/* Dark theme */
[data-ck-theme="dark"] {  /* set on <html> by the site toggle; scoped so host pages can't trigger it */
  --ck-bg:         var(--ck-carbon);
  --ck-surface:    var(--ck-graphite);
  --ck-text:       var(--ck-white);
  --ck-text-muted: var(--ck-steel);
  --ck-line:       var(--ck-line-dk);
}

/* ==========================================================================
   Elementor global colour + font fallbacks.
   Elementor's kit (Site Settings) overrides these on <body>. They keep pages
   correct when Elementor is off, and dark mode swaps the semantic ones.
   ========================================================================== */
:root {
  --e-global-color-primary: #141414;
  --e-global-color-secondary: #EFEFEC;
  --e-global-color-text: #141414;
  --e-global-color-accent: #E85002;
  --e-global-color-ckbg: #EFEFEC;
  --e-global-color-cksurface: #FAFAF8;
  --e-global-color-cktext: #141414;
  --e-global-color-ckmuted: #5C5C5C;
  --e-global-color-ckline: #D6D6D1;
  --e-global-color-ckband: #141414;
  --e-global-color-ckgraphite: #1F1F1F;
  --e-global-color-ckonband: #FAFAF8;
  --e-global-color-cksteel: #A7A7A7;
  --e-global-color-cklinedk: #333333;
  --e-global-color-ckorange: #E85002;
  --e-global-color-cksand: #D9C3AB;
}

/* Dark mode: swap the semantic tokens and the matching Elementor globals.
   html + body selector beats Elementor's .elementor-kit-N variables. */
html[data-ck-theme="dark"],
html[data-ck-theme="dark"] body {
  --ck-bg: var(--ck-carbon);
  --ck-surface: var(--ck-graphite);
  --ck-text: var(--ck-white);
  --ck-text-muted: var(--ck-steel);
  --ck-line: var(--ck-line-dk);
  --e-global-color-primary: #FAFAF8;
  --e-global-color-secondary: #141414;
  --e-global-color-text: #FAFAF8;
  --e-global-color-ckbg: #141414;
  --e-global-color-cksurface: #1F1F1F;
  --e-global-color-cktext: #FAFAF8;
  --e-global-color-ckmuted: #A7A7A7;
  --e-global-color-ckline: #333333;
  --e-global-color-ckband: #1F1F1F;
  --e-global-color-ckgraphite: #262626;
  color-scheme: dark;
}