/* ════════════════════════════════════════════════════════════
   VARIABLES — Jivamukti India TT 2027
   Framework: LUMOS
   Brand: Jivamukti burgundy (#541820) + warm gold accent (#daab85)
   Adapted from: jivamukti-global (greens replaced with reds)
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── Swatches: Brand (burgundy, replaces green) ── */
  --swatch--brand-500: #541820;
  --swatch--brand-100: color-mix(in srgb, var(--swatch--brand-500), white 80%);
  --swatch--brand-200: color-mix(in srgb, var(--swatch--brand-500), white 60%);
  --swatch--brand-300: color-mix(in srgb, var(--swatch--brand-500), white 40%);
  --swatch--brand-400: color-mix(in srgb, var(--swatch--brand-500), white 20%);
  --swatch--brand-600: color-mix(in srgb, var(--swatch--brand-500), black 20%);
  --swatch--brand-700: color-mix(in srgb, var(--swatch--brand-500), black 40%);
  --swatch--brand-800: color-mix(in srgb, var(--swatch--brand-500), black 60%);
  --swatch--brand-900: color-mix(in srgb, var(--swatch--brand-500), black 80%);
  --swatch--brand-text: var(--swatch--light-200);
  --swatch--brand-text-o20: color-mix(in srgb, var(--swatch--brand-text) 20%, transparent);

  /* ── Swatches: Secondary (warm gold — unchanged from global) ── */
  --swatch--secondary-500: #daab85;
  --swatch--secondary-100: color-mix(in srgb, var(--swatch--secondary-500), white 80%);
  --swatch--secondary-200: color-mix(in srgb, var(--swatch--secondary-500), white 60%);
  --swatch--secondary-300: color-mix(in srgb, var(--swatch--secondary-500), white 40%);
  --swatch--secondary-400: color-mix(in srgb, var(--swatch--secondary-500), white 20%);
  --swatch--secondary-600: color-mix(in srgb, var(--swatch--secondary-500), black 20%);
  --swatch--secondary-700: color-mix(in srgb, var(--swatch--secondary-500), black 40%);
  --swatch--secondary-800: color-mix(in srgb, var(--swatch--secondary-500), black 60%);
  --swatch--secondary-900: color-mix(in srgb, var(--swatch--secondary-500), black 80%);
  --swatch--secondary-text: var(--swatch--dark-900);

  /* ── Swatches: Tertiary (dark reddish-brown) ── */
  --swatch--tertiary-500: #6e3a3c;
  --swatch--tertiary-100: color-mix(in srgb, var(--swatch--tertiary-500), white 80%);
  --swatch--tertiary-200: color-mix(in srgb, var(--swatch--tertiary-500), white 60%);
  --swatch--tertiary-300: color-mix(in srgb, var(--swatch--tertiary-500), white 40%);
  --swatch--tertiary-400: color-mix(in srgb, var(--swatch--tertiary-500), white 20%);
  --swatch--tertiary-600: color-mix(in srgb, var(--swatch--tertiary-500), black 20%);
  --swatch--tertiary-700: color-mix(in srgb, var(--swatch--tertiary-500), black 40%);
  --swatch--tertiary-800: color-mix(in srgb, var(--swatch--tertiary-500), black 60%);
  --swatch--tertiary-900: color-mix(in srgb, var(--swatch--tertiary-500), black 80%);
  --swatch--tertiary-text: var(--swatch--light-200);

  /* ── Swatches: Neutrals ── */
  --swatch--dark-900: #1a1a1a;
  --swatch--dark-800: #222222;
  --swatch--dark-900-o20: color-mix(in srgb, var(--swatch--dark-900) 20%, var(--swatch--light-200));
  --swatch--light-100: white;
  --swatch--light-200: #efd8c9;
  --swatch--light-100-o20: color-mix(in srgb, var(--swatch--light-100) 20%, var(--swatch--dark-900));
  --swatch--transparent: transparent;

  /* ── Typography ── */
  --_typography---font--primary-family: 'Montserrat', Helvetica, Arial, sans-serif;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-medium: 500;
  --_typography---font--primary-bold: 700;
  --_typography---font--primary-trim-top: .33em;
  --_typography---font--primary-trim-bottom: .38em;

  --_typography---font-size--display: clamp(2.75rem, 1.5rem + 3.75vw, 5rem);
  --_typography---font-size--h1: clamp(2.75rem, 1.5rem + 3.75vw, 5rem);
  --_typography---font-size--h2: clamp(2rem, 1rem + 2.75vw, 3.5rem);
  --_typography---font-size--h3: clamp(1.5rem, 0.75rem + 1.875vw, 2.5rem);
  --_typography---font-size--h4: clamp(1.25rem, 0.875rem + 0.95vw, 1.75rem);
  --_typography---font-size--h5: clamp(1rem, 0.875rem + 0.4vw, 1.25rem);
  --_typography---font-size--h6: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --_typography---font-size--text-main: clamp(.875rem, .625rem + 0.536vw, 1.25rem);
  --_typography---font-size--text-large: clamp(1rem, .786rem + 0.536vw, 1.375rem);
  --_typography---font-size--text-small: clamp(.75rem, .679rem + 0.179vw, .875rem);
  /* Compact body — exactly 2px below text-main (20px→18px desktop). Used only
     where dense cards would overflow at full body size: tenets, prereq lists. */
  --_typography---font-size--tenet: clamp(.9375rem, .7rem + 0.55vw, 1.125rem);

  --_typography---line-height--small: 1.2;
  --_typography---line-height--medium: 1.3;
  --_typography---line-height--large: 1.4;
  --_typography---line-height--huge: 1.6;

  --_typography---letter-spacing--tight: -.01em;
  --_typography---letter-spacing--normal: 0em;
  --_typography---letter-spacing--wide: 0.03em;
  --_typography---letter-spacing--wider: 0.2em;
  --_typography---letter-spacing--widest: 0.3em;

  --_typography---text-transform--none: none;
  --_typography---text-transform--uppercase: uppercase;
  --_typography---text-transform--capitalize: capitalize;
  --_typography---text-transform--lowercase: lowercase;

  /* ── Spacing ── */
  --_spacing---space--1-8px: clamp(.375rem, .339rem + 0.179vw, .5rem);
  --_spacing---space--2-12px: clamp(.625rem, .589rem + 0.179vw, .75rem);
  --_spacing---space--3-16px: clamp(.875rem, .839rem + 0.179vw, 1rem);
  --_spacing---space--4-24px: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem);
  --_spacing---space--5-32px: clamp(1.75rem, 1.679rem + 0.357vw, 2rem);
  --_spacing---space--6-40px: clamp(2rem, 1.857rem + 0.714vw, 2.5rem);
  --_spacing---space--7-48px: clamp(2.25rem, 2.036rem + 1.071vw, 3rem);
  --_spacing---space--8-64px: clamp(2.5rem, 2.071rem + 2.143vw, 4rem);

  --_spacing---section-space--none: 0px;
  --_spacing---section-space--small-80px: clamp(3rem, 2.143rem + 4.286vw, 5rem);
  --_spacing---section-space--main-112px: clamp(3rem, 2.3rem + 3vw, 5rem);
  --_spacing---section-space--large-160px: clamp(5.5rem, 3.357rem + 10.714vw, 10rem);
  --_spacing---section-space--page-top-224px: clamp(10rem, 8.571rem + 7.143vw, 14rem);

  /* ── Site Layout ── */
  --site--viewport-max: 90;
  --site--viewport-min: 20;
  --site--column-count: 12;
  --site--margin: clamp(1rem, 0.143rem + 4.286vw, 3rem);
  --site--gutter: clamp(1rem, 0.571rem + 2.143vw, 2rem);
  --max-width--main: calc(var(--site--viewport-max) * 1rem);
  --max-width--small: 50rem;
  --max-width--full: 100%;

  /* ── Borders & Radius ── */
  --border-width--main: .1875rem;
  --radius--main: 0.5rem;
  --radius--small: 0.375rem;
  --radius--round: 100vw;

  /* ── Buttons ── */
  --button-size--medium: 3rem;
  --button-size--large: 5rem;

  /* ── Focus ── */
  --focus--width: .125rem;
  --focus--offset-inner: calc(var(--focus--width) * -1);
  --focus--offset-outer: .1875rem;

  /* ── Nav ── */
  --nav--height: 4rem;
  --nav--banner-height: 2.5rem;
  --nav--max-width-outer: var(--max-width--main);
  --nav--max-width-inner: var(--max-width--main);
  --nav--spacing-outer-horizontal: var(--site--margin);
  --nav--spacing-outer-vertical: var(--site--margin);
  --nav--spacing-inner-horizontal: var(--_spacing---space--5-32px);
  --nav--radius: var(--radius--small);
  --nav--height-total: calc(var(--nav--height) + var(--nav--spacing-outer-vertical));
  --nav--hamburger-thickness: var(--border-width--main);
  --nav--hamburger-gap: var(--_spacing---space--2-12px);
  --nav--menu-open-duration: 400ms;
  --nav--menu-close-duration: 400ms;

  /* ── Gap (utility) ── */
  --_gap---size: var(--site--gutter);

  /* ── Responsive flags ── */
  --_responsive---large: 1;
  --_responsive---medium: 0;
  --_responsive---small: 0;
  --_responsive---xsmall: 0;

  /* ── Triggers & State ── */
  --_trigger---on: 1;
  --_trigger---off: 0;
  --_state---false: 0;
  --_state---true: 1;
  --_column-count---value: 1;

  /* ── Text Style Defaults ── */
  --_text-style---font-family: var(--_typography---font--primary-family);
  --_text-style---font-size: var(--_typography---font-size--text-main);
  --_text-style---line-height: var(--_typography---line-height--huge);
  --_text-style---font-weight: var(--_typography---font--primary-regular);
  --_text-style---letter-spacing: var(--_typography---letter-spacing--normal);
  --_text-style---text-wrap: pretty;
  --_text-style---text-transform: var(--_typography---text-transform--none);
  --_text-style---margin-top: var(--_spacing---space--4-24px);
  --_text-style---margin-bottom: var(--_spacing---space--4-24px);
  --_text-style---trim-top: var(--_typography---font--primary-trim-top);
  --_text-style---trim-bottom: var(--_typography---font--primary-trim-bottom);

  /* ── Theme Defaults (Light) ── */
  --_theme---background: var(--swatch--light-200);
  --_theme---text: var(--swatch--dark-900);
  --_theme---background-2: var(--swatch--light-100);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--swatch--brand-500);
  --_theme---border: var(--swatch--dark-900-o20);
  --_theme---button-primary--text: var(--swatch--brand-text);
  --_theme---button-primary--text-hover: var(--_theme---background);
  --_theme---button-primary--background: var(--swatch--brand-500);
  --_theme---button-primary--background-hover: var(--_theme---text);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-secondary--text: var(--_theme---text);
  --_theme---button-secondary--text-hover: var(--_theme---background);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--_theme---text);
  --_theme---button-secondary--border: var(--_theme---border);
  --_theme---button-secondary--border-hover: var(--_theme---button-secondary--background-hover);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text);
  --_theme---text-link--text-hover: var(--_theme---text-link--text);
  --_theme---text-link--border-hover: var(--_theme---text);
  --_theme---nav--background: var(--_theme---background);
  --_theme---selection--background: var(--swatch--brand-500);
  --_theme---selection--text: var(--swatch--brand-text);
}