:root {
    color-scheme: light;

    /* ------------------------------------------------------------------
       Boundless Craft palette — light mode
       "Aditi" (boundless) -> deep ink ground + open, generous light space.
       "Kraft" (made right) -> forged copper as the signature. The identity
       comes from warmth, depth, and material, never from a cold SaaS hue or
       a rainbow gradient. Copper is the metal of circuitry: it reads as both
       engineered and handmade, which is exactly what this company is.
       All contrast ratios verified against the WCAG 2.1 luminance algorithm.
       ------------------------------------------------------------------ */

    /* Core palette - light mode */
    --bg-primary: #F5F2EC;   /* open paper — the boundless light */
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #ECE7DD;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-hover: #F1ECE2;
    --surface-active: #ECE7DD;
    --surface-border: #DED7C9;

    --text-primary: #1B1E24;   /* deep ink — 14.94:1 on paper (AAA) */
    --text-secondary: #565A60; /* 6.21:1 (AA) */
    --text-tertiary: #676B71;  /* 4.80:1 (AA) */
    --text-muted: #8E9198;
    --text-disabled: #A7A399;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #1B1E24;
    --link-visited: #8A5A2E;   /* muted copper — 5.25:1 (AA) */

    --primary: #A8530E;        /* copper signature — 4.81:1 (AA); white text 5.37:1 */
    --primary-hover: #85400A;  /* 6.87:1 (AA) */
    --primary-active: #632F07; /* 9.69:1 (AAA) */
    --primary-dark: #632F07;
    --primary-light: #E8965E;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    --button-primary: #A8530E;
    --button-primary-hover: #85400A;
    --button-primary-active: #632F07;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(168, 83, 14, 0.14);
    --accent-gold: #8A5A12;      /* antique gold — premium accent, 5.29:1 (AA) */
    --accent-gold-fill: #C98A2A; /* badge fill; pair with ink text, 5.69:1 */
    --accent-gold-hover: #6E4610;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

    --success: #1F6B3B;  /* 5.83:1 (AA) */
    --warning: #8A4B0A;  /* 6.08:1 (AA) */
    --error: #B32219;    /* 5.95:1 (AA) */
    --info: #1F5F8B;     /* 6.13:1 (AA) */

    --border: #DED7C9;
    --border-light: #E7E1D6;
    --divider: #DED7C9;
    --disabled-bg: #ECE7DD;
    --focus-ring: #A8530E;
    --focus-ring-inner: #FFFFFF;

    --overlay-soft: rgba(255, 255, 255, 0.78);
    --overlay-muted: rgba(236, 231, 221, 0.88);
    --overlay-strong: rgba(255, 255, 255, 0.94);
    --overlay-accent: rgba(168, 83, 14, 0.06);
    --grid-line: rgba(222, 215, 201, 0.40);
    --hero-glow: rgba(168, 83, 14, 0.12);
    --spotlight: rgba(168, 83, 14, 0.07);

    /* Warm ink shadow so depth reads as pressed paper, not cold glass. */
    --shadow-color: #1F1810;
    --shadow-sm: 0 1px 1px rgba(31, 24, 16, 0.05);
    --shadow-md: 0 1px 2px rgba(31, 24, 16, 0.06), 0 6px 18px -8px rgba(31, 24, 16, 0.10);
    --shadow-lg: 0 1px 2px rgba(31, 24, 16, 0.06), 0 14px 32px -14px rgba(31, 24, 16, 0.14);
    --shadow-xl: 0 2px 4px rgba(31, 24, 16, 0.05), 0 22px 48px -20px rgba(31, 24, 16, 0.18);
    --shadow-2xl: 0 2px 6px rgba(31, 24, 16, 0.06), 0 32px 72px -24px rgba(31, 24, 16, 0.20);
    --shadow-primary: 0 10px 24px -16px rgba(168, 83, 14, 0.28);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;
    --glow-text: none;

    /* Gradients are kept for structural compatibility but tuned to subtle,
       single-family shading only (copper->copper or ink->ink). No cross-hue
       rainbow, no purple, no glow — depth, not decoration. */
    --gradient-primary: linear-gradient(180deg, #A8530E 0%, #85400A 100%);
    --gradient-cyan: linear-gradient(180deg, #A8530E 0%, #632F07 100%);
    --gradient-signature: linear-gradient(135deg, #85400A 0%, #A8530E 55%, #8A5A12 130%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 242, 236, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 242, 236, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #1B1E24 0%, #33373F 100%);
    --gradient-section-title: linear-gradient(180deg, #1B1E24 0%, #363B44 100%);
    --gradient-display-heading: linear-gradient(180deg, #1B1E24 0%, #33373F 100%);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --space-section-block: clamp(4rem, 7vw, 6rem);
    --space-section-block-mobile: 3.5rem;
    --space-section-header-margin: var(--space-2xl);
    --space-stack-xs: var(--space-xs);
    --space-stack-sm: var(--space-sm);
    --space-stack-md: var(--space-md);
    --space-stack-lg: var(--space-lg);
    --space-stack-xl: var(--space-xl);
    --space-inline-sm: var(--space-sm);
    --space-inline-md: var(--space-md);
    --space-inline-lg: var(--space-lg);
    --space-surface-padding: var(--space-lg);
    --space-surface-padding-lg: var(--space-xl);
    --space-surface-padding-compact: var(--space-md);
    --space-container-inline: var(--space-lg);
    --space-container-inline-mobile: var(--space-md);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* Crafted heritage typography pairing.
       Fraunces is a contemporary serif with optical sizing and a SOFT axis — it
       gives editorial warmth without feeling either nostalgic or generic. It is
       reserved for display headings, section titles, and proof values.
       Source Sans 3 carries body, UI, and small text — humanist sans designed
       for screen reading. The two together read as "made by people", not
       template SaaS, and pair naturally with the forged-copper signature. */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Source Serif 4', Georgia, serif;
    --font-heading: 'Fraunces', 'Iowan Old Style', 'Source Serif 4', Georgia, serif;
    --font-sans: 'Source Sans 3', 'Söhne', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

    /* Editorial primitives — used by the editorial layer for hairline rules,
       ornaments, and the paper-grain background overlay. */
    --rule-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
    --rule-color-soft: color-mix(in srgb, var(--text-primary) 9%, transparent);
    --rule-mark: var(--accent-gold);
    --measure-prose: 64ch;
    --measure-tight: 48ch;
    /* A tiny, almost invisible monochrome speckle. SVG rendered inline so
       no extra request, no JS, and no animation. Tuned to ~3% perceived
       density on light surfaces and ~5% on dark surfaces. */
    --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");

    --z-negative: -1;
    --z-base: 0;
    --z-elevate: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-dropdown: 250;
    --z-modal: 300;
    --z-popover: 400;
    --z-toast: 500;

    /* Compatibility aliases used by existing page styles */
    --primary-color: var(--primary);
    --accent-color: var(--accent-cyan);
    --darker-bg: var(--bg-primary);
    --card-bg: var(--bg-secondary);
    --surface-color: var(--surface);
    --border-color: var(--border);
    --card-shadow: var(--shadow-xl);
    --text-on-dark: var(--text-primary);
    --text-on-light: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --transition-speed: var(--transition-base);
    --white: #FFFFFF;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Boundless Craft — dark mode.
       The dark ground is the "boundless" idea made literal: a deep, quiet ink
       that reads as infinite depth (not galaxy-purple). Copper brightens to a
       warm ember so the signature stays legible and human on the dark canvas. */

    --bg-primary: #111318;   /* boundless ink */
    --bg-secondary: #171A20;
    --bg-tertiary: #14171C;
    --surface: #1A1D24;
    --surface-raised: #22262E;
    --surface-hover: #23272F;
    --surface-active: #2A2E37;
    --surface-border: #2E323B;

    --text-primary: #ECE9E2;   /* warm porcelain — 15.33:1 (AAA) */
    --text-secondary: #A6ABB2; /* 8.04:1 (AAA) */
    --text-tertiary: #888D95;  /* 5.57:1 (AA) */
    --text-muted: #6A6F77;
    --text-disabled: #6A6F77;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #111318;
    --link-visited: #C79A72;   /* muted ember — 7.34:1 (AAA) */

    --primary: #E8965E;        /* bright copper for links/inline accents — 7.92:1 (AAA) */
    --primary-hover: #F0A876;
    --primary-active: #D07E48;
    --primary-dark: #632F07;
    --primary-light: #F0A876;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    /* Filled primary button stays deep copper with white text in both modes so
       the brand anchor never shifts. White on #A8530E is 5.37:1 (AA). */
    --button-primary: #A8530E;
    --button-primary-hover: #85400A;
    --button-primary-active: #632F07;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(232, 150, 94, 0.18);
    --accent-gold: #E6B24E;      /* antique gold — 9.59:1 (AAA) */
    --accent-gold-fill: #C98A2A;
    --accent-gold-hover: #EEC470;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

    --success: #56C97E;  /* 8.89:1 (AAA) */
    --warning: #E8B24E;  /* 9.65:1 (AAA) */
    --error: #F0776B;    /* 6.69:1 (AA) */
    --info: #62B6DE;     /* 8.20:1 (AAA) */

    --border: #2E323B;
    --border-light: #3C4049;
    --divider: #2E323B;
    --disabled-bg: #14171C;
    --focus-ring: #E8965E;
    --focus-ring-inner: #111318;

    --overlay-soft: rgba(26, 29, 36, 0.82);
    --overlay-muted: rgba(20, 23, 28, 0.88);
    --overlay-strong: rgba(17, 19, 24, 0.92);
    --overlay-accent: rgba(232, 150, 94, 0.12);
    --grid-line: rgba(166, 171, 178, 0.16);
    --hero-glow: rgba(232, 150, 94, 0.16);
    --spotlight: rgba(232, 150, 94, 0.10);

    --rule-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
    --rule-color-soft: color-mix(in srgb, var(--text-primary) 11%, transparent);
    --rule-mark: var(--accent-gold);

    --shadow-color: #05060A;
    --shadow-sm: 0 1px 1px rgba(5, 6, 10, 0.20);
    --shadow-md: 0 1px 2px rgba(5, 6, 10, 0.24), 0 8px 22px -10px rgba(5, 6, 10, 0.34);
    --shadow-lg: 0 1px 2px rgba(5, 6, 10, 0.24), 0 18px 40px -16px rgba(5, 6, 10, 0.44);
    --shadow-xl: 0 2px 4px rgba(5, 6, 10, 0.24), 0 28px 56px -22px rgba(5, 6, 10, 0.48);
    --shadow-2xl: 0 2px 6px rgba(5, 6, 10, 0.26), 0 36px 80px -26px rgba(5, 6, 10, 0.52);
    --shadow-primary: 0 12px 28px -18px rgba(168, 83, 14, 0.34);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;

    --gradient-primary: linear-gradient(180deg, #A8530E 0%, #85400A 100%);
    --gradient-cyan: linear-gradient(180deg, #E8965E 0%, #D07E48 100%);
    --gradient-signature: linear-gradient(135deg, #85400A 0%, #A8530E 55%, #8A5A12 130%);
    --gradient-surface: linear-gradient(145deg, rgba(26, 29, 36, 0.94) 0%, rgba(17, 19, 24, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(46, 50, 59, 0.38) 0%, rgba(17, 19, 24, 0.20) 100%);
    --gradient-text: linear-gradient(180deg, #ECE9E2 0%, #CFD2D8 100%);
    --gradient-section-title: linear-gradient(180deg, #ECE9E2 0%, #CFD2D8 100%);
    --gradient-display-heading: linear-gradient(180deg, #F5F3EE 0%, #D5D8DE 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --bg-primary: #111318;
        --bg-secondary: #171A20;
        --bg-tertiary: #14171C;
        --surface: #1A1D24;
        --surface-raised: #22262E;
        --surface-hover: #23272F;
        --surface-active: #2A2E37;
        --surface-border: #2E323B;

        --text-primary: #ECE9E2;
        --text-secondary: #A6ABB2;
        --text-tertiary: #888D95;
        --text-muted: #6A6F77;
        --text-disabled: #6A6F77;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #111318;
        --link-visited: #C79A72;

        --primary: #E8965E;
        --primary-hover: #F0A876;
        --primary-active: #D07E48;
        --primary-dark: #632F07;
        --primary-light: #F0A876;

        --link-color: var(--primary);
        --link-hover: var(--primary-hover);
        --link-active: var(--primary-active);

        --button-primary: #A8530E;
        --button-primary-hover: #85400A;
        --button-primary-active: #632F07;

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(232, 150, 94, 0.18);
        --accent-gold: #E6B24E;
        --accent-gold-fill: #C98A2A;
        --accent-gold-hover: #EEC470;
        --accent-pink: var(--accent-gold);
        --accent-pink-hover: var(--accent-gold-hover);

        --success: #56C97E;
        --warning: #E8B24E;
        --error: #F0776B;
        --info: #62B6DE;

        --border: #2E323B;
        --border-light: #3C4049;
        --divider: #2E323B;
        --disabled-bg: #14171C;
        --focus-ring: #E8965E;
        --focus-ring-inner: #111318;

        --overlay-soft: rgba(26, 29, 36, 0.82);
        --overlay-muted: rgba(20, 23, 28, 0.88);
        --overlay-strong: rgba(17, 19, 24, 0.92);
        --overlay-accent: rgba(232, 150, 94, 0.12);
        --grid-line: rgba(166, 171, 178, 0.16);
        --hero-glow: rgba(232, 150, 94, 0.16);
        --spotlight: rgba(232, 150, 94, 0.10);

        --rule-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
        --rule-color-soft: color-mix(in srgb, var(--text-primary) 11%, transparent);
        --rule-mark: var(--accent-gold);

        --shadow-color: #05060A;
        --shadow-sm: 0 1px 1px rgba(5, 6, 10, 0.20);
        --shadow-md: 0 1px 2px rgba(5, 6, 10, 0.24), 0 8px 22px -10px rgba(5, 6, 10, 0.34);
        --shadow-lg: 0 1px 2px rgba(5, 6, 10, 0.24), 0 18px 40px -16px rgba(5, 6, 10, 0.44);
        --shadow-xl: 0 2px 4px rgba(5, 6, 10, 0.24), 0 28px 56px -22px rgba(5, 6, 10, 0.48);
        --shadow-2xl: 0 2px 6px rgba(5, 6, 10, 0.26), 0 36px 80px -26px rgba(5, 6, 10, 0.52);
        --shadow-primary: 0 12px 28px -18px rgba(168, 83, 14, 0.34);

        --glow-primary: 0 0 0 0 transparent;
        --glow-cyan: 0 0 0 0 transparent;

        --gradient-primary: linear-gradient(180deg, #A8530E 0%, #85400A 100%);
        --gradient-cyan: linear-gradient(180deg, #E8965E 0%, #D07E48 100%);
        --gradient-signature: linear-gradient(135deg, #85400A 0%, #A8530E 55%, #8A5A12 130%);
        --gradient-surface: linear-gradient(145deg, rgba(26, 29, 36, 0.94) 0%, rgba(17, 19, 24, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(46, 50, 59, 0.38) 0%, rgba(17, 19, 24, 0.20) 100%);
        --gradient-text: linear-gradient(180deg, #ECE9E2 0%, #CFD2D8 100%);
        --gradient-section-title: linear-gradient(180deg, #ECE9E2 0%, #CFD2D8 100%);
        --gradient-display-heading: linear-gradient(180deg, #F5F3EE 0%, #D5D8DE 100%);
    }
}