/* ==========================================================================
   CinderTek - Design Tokens

   Two layers:
   1. Primitives (--ct-*) hold the exact brand values. Do not use them in
      components.
   2. Semantic tokens (--color-*, --font-*, --space-*, ...) are what the
      rest of the CSS consumes. Themes only re-map semantic tokens.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Brand palette (primitives)
       ---------------------------------------------------------------------- */
    --ct-charcoal: #101820;
    --ct-graphite: #303030;
    --ct-ember: #C85A20;
    --ct-copper: #A94B1C;
    --ct-warm-white: #F7F5EF;
    --ct-white: #FFFFFF;
    --ct-soft-gray: #E5E5E2;

    /* Forge palette: the site is dark everywhere; one accent. */
    --ct-ink: #0A0D11;
    --ct-ink-raise: #10151B;
    --ct-ink-high: #161C23;
    --ct-paper: #EDEBE6;
    --ct-mist: #B4B9BF;
    --ct-fog: #7C838C;
    --ct-ember-bright: #FF6A1F;
    --ct-ember-deep: #E0551A;

    /* Logo mark - sampled from the master artwork */
    --ct-mark-dark: #111C26;
    --ct-mark-slate: #2D3641;
    --ct-mark-copper: #B23C01;
    --ct-mark-ember: #DF6120;

    /* ----------------------------------------------------------------------
       Semantic colors - Forge (dark), used on every page and section.
       Contrast on --color-bg: text 15.9:1, body 9.8:1, muted 4.9:1,
       accent 6.9:1 (large text / UI).
       ---------------------------------------------------------------------- */
    --color-bg: var(--ct-ink);
    --color-surface: var(--ct-ink-raise);
    --color-surface-alt: var(--ct-ink-high);

    --color-text: var(--ct-paper);
    --color-text-body: var(--ct-mist);
    --color-text-muted: var(--ct-fog);

    --color-border: rgba(237, 235, 230, 0.09);
    --color-border-strong: rgba(237, 235, 230, 0.26);

    --color-accent: var(--ct-ember-bright);
    --color-accent-strong: var(--ct-ember-deep);
    --color-on-accent: #160800;

    --color-link: var(--ct-paper);
    --color-link-underline: var(--ct-ember-bright);

    --color-focus: var(--ct-ember-bright);
    --color-selection-bg: var(--ct-ember-bright);
    --color-selection-text: #160800;

    --color-inverse-bg: var(--ct-paper);
    --color-inverse-text: var(--ct-ink);

    /* Glass: header and the call-to-action panel only. */
    --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 48%, rgba(255, 255, 255, 0.035));
    --glass-bar: rgba(12, 16, 21, 0.42);
    --glass-blur: blur(24px) saturate(170%);
    --glass-edge: rgba(237, 235, 230, 0.1);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);

    /* Logo mark tones. On dark surfaces the two charcoal shards invert so the
       mark keeps its silhouette; copper and ember never change. */
    --mark-dark: var(--ct-paper);
    --mark-slate: color-mix(in srgb, var(--ct-paper) 58%, var(--ct-ink));
    --mark-copper: var(--ct-mark-copper);
    --mark-ember: var(--ct-ember-bright);
    --mark-word: var(--ct-paper);

    /* Channels for translucent tints, so one rule works in both themes:
       rgba(var(--rgb-line), 0.3). Dark values here; light ones below. */
    --rgb-hi: 255, 255, 255;        /* highlights and glare */
    --rgb-line: 180, 185, 191;      /* hairlines, grids, drawings */
    --rgb-paper: 237, 235, 230;     /* text-coloured fills */
    --rgb-warm: 247, 245, 239;      /* warm text-coloured strokes */
    --rgb-well: 10, 13, 17;         /* recessed fields, bars over content */
    --rgb-shadow: 0, 0, 0;
    --shadow-k: 1;                  /* shadow strength multiplier */
    --rgb-accent: 255, 106, 31;

    /* Status and data colours */
    --color-ok: #5fbf8f;
    --rgb-ok: 95, 191, 143;
    --color-warn: #e9b44c;
    --rgb-warn: 233, 180, 76;
    --color-info: #7aa7d9;
    --rgb-info: 122, 167, 217;
    --color-violet: #c38be0;
    --rgb-violet: 195, 139, 224;
    --color-neutral: #8b939c;
    --color-neutral-2: #6f7882;

    /* Solid panels inside tools */
    --color-panel: #121920;
    --color-panel-2: #1a222c;
    --color-panel-3: #131a22;
    --color-panel-head: #1d2631;
    --color-panel-head-2: #161e27;
    --color-chip-off: #2a333d;

    /* First-visit intro */
    --intro-bg: #0B1117;
    --intro-fg: var(--ct-warm-white);
    --rgb-intro: 247, 245, 239;
    --color-band: var(--color-bg);

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */
    --font-fallback: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Manrope", var(--font-fallback);
    --font-body: "Inter", var(--font-fallback);
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-none: 1;
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-tighter: -0.045em;
    --ls-tight: -0.03em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-caps: 0.12em;

    --measure-narrow: 45ch;
    --measure: 65ch;
    --measure-wide: 80ch;

    /* ----------------------------------------------------------------------
       Font sizes
       Fluid sizes scale linearly between 360px and 1440px viewports.
       ---------------------------------------------------------------------- */
    --fs-2xs: 0.6875rem;                                        /* 11 */
    --fs-xs: 0.75rem;                                           /* 12 */
    --fs-sm: 0.875rem;                                          /* 14 */
    --fs-base: 1rem;                                            /* 16 */
    --fs-md: 1.125rem;                                          /* 18 */
    --fs-lg: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);      /* 20 -> 24 */
    --fs-xl: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);         /* 24 -> 32 */
    --fs-2xl: clamp(1.875rem, 1.5833rem + 1.2963vw, 2.75rem);   /* 30 -> 44 */
    --fs-3xl: clamp(2.25rem, 1.75rem + 2.2222vw, 3.75rem);      /* 36 -> 60 */
    --fs-4xl: clamp(2.75rem, 1.9167rem + 3.7037vw, 5.25rem);    /* 44 -> 84 */
    --fs-5xl: clamp(3.25rem, 1.8333rem + 6.2963vw, 7.5rem);     /* 52 -> 120 */

    /* ----------------------------------------------------------------------
       Spacing (4px base)
       ---------------------------------------------------------------------- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;  /* 2 */
    --space-1: 0.25rem;     /* 4 */
    --space-2: 0.5rem;      /* 8 */
    --space-3: 0.75rem;     /* 12 */
    --space-4: 1rem;        /* 16 */
    --space-5: 1.25rem;     /* 20 */
    --space-6: 1.5rem;      /* 24 */
    --space-8: 2rem;        /* 32 */
    --space-10: 2.5rem;     /* 40 */
    --space-12: 3rem;       /* 48 */
    --space-16: 4rem;       /* 64 */
    --space-20: 5rem;       /* 80 */
    --space-24: 6rem;       /* 96 */
    --space-32: 8rem;       /* 128 */
    --space-40: 10rem;      /* 160 */
    --space-48: 12rem;      /* 192 */

    --space-section-sm: clamp(3rem, 2.3333rem + 2.963vw, 5rem);     /* 48 -> 80 */
    --space-section: clamp(4rem, 3rem + 4.4444vw, 7rem);          /* 64 -> 112 */
    --space-section-lg: clamp(5rem, 3.6667rem + 5.9259vw, 9rem);  /* 80 -> 144 */

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */
    --container-sm: 640px;
    --container-md: 960px;
    --container-lg: 1280px;
    --container-xl: 1536px;
    --container-default: var(--container-lg);

    --gutter: clamp(1.25rem, 0.6667rem + 2.5926vw, 3rem);          /* 20 -> 48 */
    --grid-columns: 12;
    --grid-gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);           /* 16 -> 32 */

    --header-height: 80px;
    --tap-target: 44px;
    --control-height: 48px;

    /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */
    --border-hairline: 1px;
    --border-medium: 2px;
    --border-heavy: 4px;

    --border-default: var(--border-hairline) solid var(--color-border);
    --border-strong: var(--border-hairline) solid var(--color-border-strong);

    /* ----------------------------------------------------------------------
       Radius - deliberately tight; the brand is square-edged.
       ---------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-full: 9999px;

    --radius-control: var(--radius-xs);
    --radius-surface: var(--radius-none);

    /* ----------------------------------------------------------------------
       Focus
       ---------------------------------------------------------------------- */
    --focus-width: var(--border-medium);
    --focus-offset: 3px;
    --focus-ring: var(--focus-width) solid var(--color-focus);

    /* ----------------------------------------------------------------------
       Motion
       GSAP equivalents live in js/motion.js: out = "expo.out",
       in-out = "expo.inOut", precise = "sine.inOut".
       ---------------------------------------------------------------------- */
    --duration-instant: 80ms;
    --duration-fast: 160ms;
    --duration-base: 240ms;
    --duration-moderate: 400ms;
    --duration-slow: 640ms;
    --duration-slower: 960ms;
    --duration-slowest: 1400ms;

    --ease-linear: linear;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-precise: cubic-bezier(0.45, 0, 0.55, 1);

    /* Interaction roles - every hover and state change uses one of these. */
    --motion-shift: var(--duration-moderate) var(--ease-out);     /* offsets, icon nudges */
    --motion-tone: var(--duration-moderate) var(--ease-standard); /* color, opacity */
    --motion-draw: var(--duration-slow) var(--ease-in-out);       /* accent lines drawing */
    --shift-sm: 4px;
    --shift-md: 8px;

    /* ----------------------------------------------------------------------
       Z-index
       ---------------------------------------------------------------------- */
    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-cursor: 700;
    --z-max: 1000;
}

/* --------------------------------------------------------------------------
   Themes
   Dark (Forge) is the default. The light theme is chosen with the header
   toggle: js/theme.js sets data-theme="light" on <html> (and an inline
   script in <head> restores the choice before first paint).

   Component-level light treatments (bands, the ember call-to-action panels,
   depth and gloss) live in theme-light.css, loaded after the page styles.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
    --color-bg: #F4F3EF;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EAE8E3;

    --color-text: #101820;
    --color-text-body: #3B4550;
    --color-text-muted: #5F6872;

    --color-border: rgba(16, 24, 32, 0.11);
    --color-border-strong: rgba(16, 24, 32, 0.26);

    --color-accent: #C4501A;
    --color-accent-strong: #A94B1C;
    --color-on-accent: #FFFFFF;

    --color-link: #101820;
    --color-link-underline: #C4501A;

    --color-focus: #C4501A;
    --color-selection-bg: #C4501A;
    --color-selection-text: #FFFFFF;

    --color-inverse-bg: #101820;
    --color-inverse-text: #F4F3EF;

    --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0.82));
    --glass-bar: rgba(244, 243, 239, 0.78);
    --glass-edge: rgba(16, 24, 32, 0.1);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --mark-dark: var(--ct-mark-dark);
    --mark-slate: var(--ct-mark-slate);
    --mark-copper: var(--ct-mark-copper);
    --mark-ember: var(--ct-mark-ember);
    --mark-word: var(--ct-charcoal);

    --rgb-hi: 16, 24, 32;
    --rgb-line: 70, 80, 92;
    --rgb-paper: 16, 24, 32;
    --rgb-warm: 16, 24, 32;
    --rgb-well: 255, 255, 255;
    --rgb-shadow: 38, 30, 22;
    --shadow-k: 0.32;
    --rgb-accent: 214, 88, 26;

    --color-ok: #1A8758;
    --rgb-ok: 26, 135, 88;
    --color-warn: #A86A00;
    --rgb-warn: 191, 125, 10;
    --color-info: #2F6DB5;
    --rgb-info: 47, 109, 181;
    --color-violet: #8A4FB0;
    --rgb-violet: 138, 79, 176;
    --color-neutral: #7A838C;
    --color-neutral-2: #8E959D;

    --color-panel: #FFFFFF;
    --color-panel-2: #FBFAF8;
    --color-panel-3: #FFFFFF;
    --color-panel-head: #F3F1EC;
    --color-panel-head-2: #ECEAE4;
    --color-chip-off: #D6D3CC;

    --color-band: #EAE7E1;

    --intro-bg: #F4F3EF;
    --intro-fg: #101820;
    --rgb-intro: 16, 24, 32;

    color-scheme: light;
}