:root {
    color-scheme: light;

    /* ------------------------------------------------------------------
       Ajrakh palette — light mode ("Bone Cloth").
       Owned ground, iron ink, one signature pigment (Vat Indigo), the
       madder thread, turmeric glints. Inspired by Ajrakh block printing,
       the living textile tradition of Sindh and Kachchh.
       Narrative, rules, and verified ratios live in
       README.website-color-spec.md — the source of truth.
       ------------------------------------------------------------------ */

    /* Core palette - light mode */
    --bg-primary: #F1E9D7;   /* bone cloth — the owned ground */
    --bg-secondary: #FAF5E9;
    --bg-tertiary: #E9DFC8;
    --surface: #FAF5E9;
    --surface-raised: #FFFFFF;
    --surface-hover: #EDE4CE;
    --surface-active: #E9DFC8;
    --surface-border: #DCD0B4;

    --text-primary: #15171E;   /* iron ink — 14.81:1 on cloth (AAA) */
    --text-secondary: #55524A; /* 6.45:1 (AA) */
    --text-tertiary: #676357;  /* 4.97:1 (AA) */
    --text-muted: #8B877D;
    --text-disabled: #A39E90;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #15171E;
    --link-visited: #5A5490;   /* washed indigo — 5.60:1 (AA) */

    --primary: #2A3ABF;        /* vat indigo signature — 7.08:1 (AAA); white text 8.55:1 */
    --primary-hover: #232E9C;  /* 8.95:1 (AAA) */
    --primary-active: #1A2377; /* 11.21:1 (AAA) */
    --primary-dark: #1A2377;
    --primary-light: #A3B1FF;

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

    --button-primary: #2A3ABF;
    --button-primary-hover: #232E9C;
    --button-primary-active: #1A2377;

    /* The madder thread — the brand's one ritual mark. A 3px rule at the
       top of every page and 1.5px underlines beneath signature links. */
    --thread: #A83618;         /* madder — 5.42:1 (AA) */
    --thread-hover: #8C2C12;   /* 7.00:1 (AAA) */

    /* Product accent slot — brand architecture. Each product site may
       override this trio with one approved accent (AA in both modes,
       distinct from semantic and parent ritual colors). Madder and
       turmeric are not available as product accents. Defaults to the
       parent signature so unassigned products stay on-brand. The
       foreground is the text/icon color used on accent-filled elements. */
    --product-accent: var(--primary);
    --product-accent-hover: var(--primary-hover);
    --product-accent-foreground: var(--text-on-accent); /* white on #2A3ABF — 8.55:1 */

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(42, 58, 191, 0.14);
    --accent-gold: #7D5C0C;      /* turmeric shadow — the only text-safe turmeric, 5.10:1 (AA) */
    --accent-gold-fill: #D9A429; /* turmeric badge fill; pair with ink text, 7.92:1 */
    --accent-gold-hover: #64490A;
    --accent-pink: var(--thread);
    --accent-pink-hover: var(--thread-hover);

    --success: #1E6B3C;  /* 5.39:1 (AA) */
    --warning: #7A5A10;  /* 5.27:1 (AA) */
    --error: #B7133F;    /* 5.47:1 (AA) — crimson, colder than madder */
    --info: #1F5F8B;     /* 5.66:1 (AA) */

    --border: #DCD0B4;
    --border-light: #E4DAC3;
    --divider: #DCD0B4;
    --disabled-bg: #E9DFC8;
    --focus-ring: #2A3ABF;
    --focus-ring-inner: #FFFFFF;

    --overlay-soft: rgba(250, 245, 233, 0.80);
    --overlay-muted: rgba(233, 223, 200, 0.88);
    --overlay-strong: rgba(250, 245, 233, 0.94);
    --overlay-accent: rgba(42, 58, 191, 0.06);
    --grid-line: rgba(220, 208, 180, 0.40);
    --hero-glow: rgba(42, 58, 191, 0.10);
    --spotlight: rgba(42, 58, 191, 0.06);

    /* Warm iron-ink shadow so depth reads as pressed cloth, not cold glass. */
    --shadow-color: #16140E;
    --shadow-sm: 0 1px 1px rgba(22, 20, 14, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 20, 14, 0.06), 0 6px 18px -8px rgba(22, 20, 14, 0.10);
    --shadow-lg: 0 1px 2px rgba(22, 20, 14, 0.06), 0 14px 32px -14px rgba(22, 20, 14, 0.14);
    --shadow-xl: 0 2px 4px rgba(22, 20, 14, 0.05), 0 22px 48px -20px rgba(22, 20, 14, 0.18);
    --shadow-2xl: 0 2px 6px rgba(22, 20, 14, 0.06), 0 32px 72px -24px rgba(22, 20, 14, 0.20);
    --shadow-primary: 0 10px 24px -16px rgba(42, 58, 191, 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 (indigo->indigo or ink->ink). No cross-hue
       rainbow, no purple-to-pink, no glow — depth, not decoration. */
    --gradient-primary: linear-gradient(180deg, #2A3ABF 0%, #232E9C 100%);
    --gradient-cyan: linear-gradient(180deg, #2A3ABF 0%, #1A2377 100%);
    --gradient-signature: linear-gradient(135deg, #1A2377 0%, #2A3ABF 60%, #3D4ED8 130%);
    --gradient-surface: linear-gradient(180deg, rgba(250, 245, 233, 0.98) 0%, rgba(241, 233, 215, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(250, 245, 233, 0.94) 0%, rgba(241, 233, 215, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #15171E 0%, #31343F 100%);
    --gradient-section-title: linear-gradient(180deg, #15171E 0%, #343846 100%);
    --gradient-display-heading: linear-gradient(180deg, #15171E 0%, #31343F 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;

    /* Editorial 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. Ink on cloth wants a serif with character; the two
       together read as "made by people", not template SaaS. */
    --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 cloth-grain background overlay. The rule mark is the
       madder thread, never gold. */
    --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(--thread);
    --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;

    /* Ajrakh — dark mode ("The Vat").
       Not the light site inverted: the same cloth, deeper in the dye. The
       ground is the indigo vat itself, links turn moonlit, the madder thread
       glows to ember, and turmeric glints stay warm. */

    --bg-primary: #0B0E1C;   /* the vat */
    --bg-secondary: #101528;
    --bg-tertiary: #0D1120;
    --surface: #131829;
    --surface-raised: #1B2136;
    --surface-hover: #1E2439;
    --surface-active: #252C45;
    --surface-border: #2B324C;

    --text-primary: #EDE9DF;   /* raw cloth — 15.84:1 (AAA) */
    --text-secondary: #A7ABBC; /* 8.41:1 (AAA) */
    --text-tertiary: #888DA1;  /* 5.82:1 (AA) */
    --text-muted: #696F85;
    --text-disabled: #696F85;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #0B0E1C;
    --link-visited: #9C9FD6;   /* washed moonlit indigo — 7.63:1 (AAA) */

    --primary: #A3B1FF;        /* moonlit indigo for links/inline accents — 9.41:1 (AAA) */
    --primary-hover: #B8C3FF;
    --primary-active: #8B9BF2;
    --primary-dark: #1A2377;
    --primary-light: #B8C3FF;

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

    /* Filled primary button stays deep vat indigo with white text in both
       modes so the brand anchor never shifts. White on #2F3FC7 is 7.90:1. */
    --button-primary: #2F3FC7;
    --button-primary-hover: #2735AC;
    --button-primary-active: #1F2A8C;

    --thread: #FF8E73;         /* madder ember — 8.57:1 (AAA) */
    --thread-hover: #FFA48D;

    --product-accent: var(--primary);
    --product-accent-hover: var(--primary-hover);
    --product-accent-foreground: var(--text-on-bright-accent); /* vat ink on #A3B1FF — 9.41:1 */

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(163, 177, 255, 0.18);
    --accent-gold: #E9BC4F;      /* turmeric glint — 10.76:1 (AAA) */
    --accent-gold-fill: #D9A429;
    --accent-gold-hover: #F0CA6E;
    --accent-pink: var(--thread);
    --accent-pink-hover: var(--thread-hover);

    --success: #56C97E;  /* 9.19:1 (AAA) */
    --warning: #E9BC4F;  /* 10.76:1 (AAA) */
    --error: #FF7D93;    /* 7.87:1 (AAA) */
    --info: #6FB5E8;     /* 8.64:1 (AAA) */

    --border: #2B324C;
    --border-light: #383F5C;
    --divider: #2B324C;
    --disabled-bg: #0D1120;
    --focus-ring: #A3B1FF;
    --focus-ring-inner: #0B0E1C;

    --overlay-soft: rgba(19, 24, 41, 0.82);
    --overlay-muted: rgba(13, 17, 32, 0.88);
    --overlay-strong: rgba(11, 14, 28, 0.92);
    --overlay-accent: rgba(163, 177, 255, 0.12);
    --grid-line: rgba(167, 171, 188, 0.16);
    --hero-glow: rgba(163, 177, 255, 0.14);
    --spotlight: rgba(163, 177, 255, 0.09);

    --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(--thread);

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

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

    --gradient-primary: linear-gradient(180deg, #2F3FC7 0%, #2735AC 100%);
    --gradient-cyan: linear-gradient(180deg, #A3B1FF 0%, #8B9BF2 100%);
    --gradient-signature: linear-gradient(135deg, #1F2A8C 0%, #2F3FC7 60%, #4A5AE8 130%);
    --gradient-surface: linear-gradient(145deg, rgba(19, 24, 41, 0.94) 0%, rgba(11, 14, 28, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(43, 50, 76, 0.38) 0%, rgba(11, 14, 28, 0.20) 100%);
    --gradient-text: linear-gradient(180deg, #EDE9DF 0%, #C9CCD8 100%);
    --gradient-section-title: linear-gradient(180deg, #EDE9DF 0%, #C9CCD8 100%);
    --gradient-display-heading: linear-gradient(180deg, #F4F1E9 0%, #D2D5E0 100%);
}

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

        --bg-primary: #0B0E1C;
        --bg-secondary: #101528;
        --bg-tertiary: #0D1120;
        --surface: #131829;
        --surface-raised: #1B2136;
        --surface-hover: #1E2439;
        --surface-active: #252C45;
        --surface-border: #2B324C;

        --text-primary: #EDE9DF;
        --text-secondary: #A7ABBC;
        --text-tertiary: #888DA1;
        --text-muted: #696F85;
        --text-disabled: #696F85;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #0B0E1C;
        --link-visited: #9C9FD6;

        --primary: #A3B1FF;
        --primary-hover: #B8C3FF;
        --primary-active: #8B9BF2;
        --primary-dark: #1A2377;
        --primary-light: #B8C3FF;

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

        --button-primary: #2F3FC7;
        --button-primary-hover: #2735AC;
        --button-primary-active: #1F2A8C;

        --thread: #FF8E73;
        --thread-hover: #FFA48D;

        --product-accent: var(--primary);
        --product-accent-hover: var(--primary-hover);
        --product-accent-foreground: var(--text-on-bright-accent);

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(163, 177, 255, 0.18);
        --accent-gold: #E9BC4F;
        --accent-gold-fill: #D9A429;
        --accent-gold-hover: #F0CA6E;
        --accent-pink: var(--thread);
        --accent-pink-hover: var(--thread-hover);

        --success: #56C97E;
        --warning: #E9BC4F;
        --error: #FF7D93;
        --info: #6FB5E8;

        --border: #2B324C;
        --border-light: #383F5C;
        --divider: #2B324C;
        --disabled-bg: #0D1120;
        --focus-ring: #A3B1FF;
        --focus-ring-inner: #0B0E1C;

        --overlay-soft: rgba(19, 24, 41, 0.82);
        --overlay-muted: rgba(13, 17, 32, 0.88);
        --overlay-strong: rgba(11, 14, 28, 0.92);
        --overlay-accent: rgba(163, 177, 255, 0.12);
        --grid-line: rgba(167, 171, 188, 0.16);
        --hero-glow: rgba(163, 177, 255, 0.14);
        --spotlight: rgba(163, 177, 255, 0.09);

        --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(--thread);

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

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

        --gradient-primary: linear-gradient(180deg, #2F3FC7 0%, #2735AC 100%);
        --gradient-cyan: linear-gradient(180deg, #A3B1FF 0%, #8B9BF2 100%);
        --gradient-signature: linear-gradient(135deg, #1F2A8C 0%, #2F3FC7 60%, #4A5AE8 130%);
        --gradient-surface: linear-gradient(145deg, rgba(19, 24, 41, 0.94) 0%, rgba(11, 14, 28, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(43, 50, 76, 0.38) 0%, rgba(11, 14, 28, 0.20) 100%);
        --gradient-text: linear-gradient(180deg, #EDE9DF 0%, #C9CCD8 100%);
        --gradient-section-title: linear-gradient(180deg, #EDE9DF 0%, #C9CCD8 100%);
        --gradient-display-heading: linear-gradient(180deg, #F4F1E9 0%, #D2D5E0 100%);
    }
}