/* ==========================================================================
   Techpaathshala – Global foundations (tokens.css)
   Source: Techpaathshala Design System + approved Homepage V2, Program and
   Programs page designs. Import once, before any component CSS.
   Light surfaces are the default. Add class="surface-dark" (or
   data-surface="dark") to any dark section – hero, nav, trainers, footer –
   and every semantic token below remaps automatically.
   ========================================================================== */

:root {
  /* 1. Primitive palette – reference only; components use semantic tokens */
  /* Gold */
  --gold-50: #fff8d6;       /* Cream section ground */
  --gold-100: #fff1b3;      /* Text highlight mark */
  --gold-400: #ffd124;      /* Gold hover on dark */
  --gold-500: #f3bd00;      /* Brand gold */
  --gold-600: #e6a800;      /* Gold hover on light */
  --gold-700: #cc9600;      /* Gold borders on cream */
  --gold-800: #8a6a00;      /* Gold text on light */
  /* Ink */
  --ink-950: #0d0f14;       /* Dark page ground */
  --ink-900: #111318;       /* Footer, dark alt ground */
  --ink-850: #161920;       /* Dark card */
  --ink-800: #1d2029;       /* Dark card hover */
  --ink-750: #20232b;       /* Dark chip fill */
  --ink-700: #2a2d36;       /* Dark border */
  --ink-600: #3a3d46;       /* Dark control border */
  --ink-500: #60656f;       /* Dark strong border */
  /* Gray */
  --white: #ffffff;         /* Light ground */
  --gray-50: #f8f9fa;       /* Light alt ground */
  --gray-100: #f1f3f5;      /* Chip fill, skeleton */
  --gray-200: #e9ecef;      /* Light border */
  --gray-300: #ced4da;      /* Handles, dots */
  --gray-400: #9a9aa2;      /* Secondary text on dark */
  --gray-450: #cccccc;      /* Body text on dark */
  --gray-500: #868e96;      /* Input borders */
  --gray-600: #6c757d;      /* Muted text on white */
  --gray-700: #5c636a;      /* Secondary text on light */
  --gray-900: #1c1c1e;      /* Body text on light */
  /* Status */
  --green-700: #15803d;     /* Success on light */
  --green-400: #22c55e;     /* Success on dark */
  --red-700: #b42318;       /* Error on light */
  --red-300: #f97066;       /* Error on dark */
  --red-50: #fef3f2;        /* Error tint */
  --orange-500: #e8602f;    /* Urgency fill */
  --orange-700: #b54708;    /* Urgency text on light */
  --orange-300: #f3a37f;    /* Urgency text on dark */
  --whatsapp: #25d366;      /* WhatsApp button only */

  /* 2. Semantic colours – light surfaces (default) */
  --color-bg: var(--white);                     /* Page background */
  --color-bg-alt: var(--gray-50);               /* Alternating sections, footer */
  --color-bg-cream: var(--gold-50);             /* Warm sections (testimonials, who-for) */
  --color-surface: var(--white);                /* Cards, panels, menus */
  --color-surface-hover: var(--gray-50);        /* Card / row hover */
  --color-surface-sunken: var(--gray-100);      /* Chips, skeletons, inactive pills */
  --color-heading: var(--ink-950);              /* Headings */
  --color-text: var(--gray-900);                /* Body copy */
  --color-text-secondary: var(--gray-700);      /* Supporting copy on any ground */
  --color-text-muted: var(--gray-600);          /* Captions on white / dark only */
  --color-border: var(--gray-200);              /* Card outlines, dividers (decorative) */
  --color-border-control: var(--gray-300);      /* Chips, secondary outlines */
  --color-border-strong: var(--gray-500);       /* Inputs, outline buttons (≥3:1) */
  --color-accent: var(--gold-500);              /* Primary buttons, active states, highlight band */
  --color-accent-hover: var(--gold-600);        /* Primary button hover */
  --color-accent-text: var(--gold-800);         /* Gold text: eyebrows, links */
  --color-accent-soft: var(--gold-50);          /* Icon chips, selected rows */
  --color-on-accent: var(--gray-900);           /* Text/icons on gold */
  --color-success: var(--green-700);            /* Success text & icons */
  --color-error: var(--red-700);                /* Error text, invalid borders */
  --color-error-soft: var(--red-50);            /* Error message background */
  --color-urgency: var(--orange-700);           /* "Few Seats Left" text */
  --color-urgency-fill: var(--orange-500);      /* Urgency dot / badge fill */
  --color-whatsapp: var(--whatsapp);            /* WhatsApp button (ink icon) */
  --color-focus: var(--gray-900);               /* Focus outline */
  --color-overlay: rgba(13, 15, 20, 0.6);   /* Backdrop behind menus & drawers */
  --color-highlight: linear-gradient(180deg, transparent 58%, var(--gold-500) 58%, var(--gold-500) 90%, transparent 90%); /* Gold marker band behind key words */

  /* 3. Typography */
  --font-sans: "Poppins", "Poppins Fallback", system-ui, sans-serif;   /* Website: headings + body */
  --font-body: "Lato", "Lato Fallback", system-ui, sans-serif;         /* Portals & dense tables */
  --font-script: "Satisfy", cursive;                                    /* Decorative numerals only, ≥24px */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;               /* Code snippets (proposed) */
  --weight-regular: 400;
  --weight-semibold: 500;
  --weight-bold: 600;
  /* Sizes are fluid between 390px and 1440px viewports (mobile → desktop value) */
  --text-display: clamp(2.5rem, 1.849rem + 2.667vw, 4.25rem); /* Homepage hero H1 · 40→68px */
  --leading-display: 1.05;
  --tracking-display: -0.03em;
  --text-h1: clamp(2rem, 1.536rem + 1.905vw, 3.25rem); /* Page H1 (program, listing) · 32→52px */
  --leading-h1: 1.08;
  --tracking-h1: -0.025em;
  --text-h2: clamp(1.6875rem, 1.362rem + 1.333vw, 2.5625rem); /* Section headings · 27→41px */
  --leading-h2: 1.12;
  --tracking-h2: -0.02em;
  --text-h3: clamp(1.1875rem, 1.095rem + 0.381vw, 1.4375rem); /* Card / panel titles · 19→23px */
  --leading-h3: 1.3;
  --tracking-h3: -0.01em;
  --text-h4: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* Small titles, list headings · 17→19px */
  --leading-h4: 1.35;
  --text-lead: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* Hero & section subtext · 17→19px */
  --leading-lead: 1.6;
  --text-body-lg: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); /* Long paragraphs · 16→17px */
  --leading-body-lg: 1.7;
  --text-body: clamp(0.9375rem, 0.9143rem + 0.09524vw, 1rem); /* Default text, buttons · 15→16px */
  --leading-body: 1.65;
  --text-ui: clamp(0.875rem, 0.8518rem + 0.09524vw, 0.9375rem); /* Nav items, list items, labels · 14→15px */
  --leading-ui: 1.45;
  --text-body-sm: 14px;                                 /* Card descriptions, helper text · 14→14px */
  --leading-body-sm: 1.6;
  --text-caption: 13px;                                 /* Meta rows, captions · 13→13px */
  --leading-caption: 1.5;
  --text-eyebrow: 12px;                                 /* Section labels (uppercase) · 12→12px */
  --leading-eyebrow: 1.5;
  --tracking-eyebrow: 0.16em;
  --text-badge: 11px;                                   /* Tags, "New" badges · 11→11px */
  --leading-badge: 1.4;
  --tracking-badge: 0.04em;
  --text-app-body: 14px;                                /* Lato – portals & dense tables · 14→14px */
  --leading-app-body: 1.5;

  /* 4. Spacing – 8px grid (4px and 12px half-steps) */
  --space-0-5: 4px;      /* Icon–label gaps */
  --space-1: 8px;        /* Tight gaps in components */
  --space-1-5: 12px;     /* List / chip gaps */
  --space-2: 16px;       /* Default gap · mobile gutter */
  --space-3: 24px;       /* Card padding · card gaps */
  --space-4: 32px;       /* Heading → content */
  --space-5: 40px;       /* Subtext → buttons */
  --space-6: 48px;       /* Block spacing */
  --space-8: 64px;       /* Mobile section padding */
  --space-10: 80px;      /* Large blocks */
  --space-12: 96px;      /* Desktop page gutter */
  --space-13: 104px;     /* Desktop section padding */

  /* 5. Radius */
  --radius-xs: 6px;     /* Tags, small badges */
  --radius-sm: 8px;     /* Split chips, small buttons */
  --radius-md: 10px;    /* Buttons, inputs, icon buttons */
  --radius-lg: 16px;    /* Panels, list groups, accordions */
  --radius-xl: 20px;    /* Cards, menus, forms */
  --radius-pill: 100px; /* Pills, segmented chips */
  --radius-round: 50%;  /* Avatars, round buttons */

  /* 6. Elevation */
  --shadow-sm: 0 1px 2px rgba(13,15,20,.06);   /* Hairline lift */
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);   /* Cards at rest */
  --shadow-card-hover: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);   /* Card hover */
  --shadow-menu: 0 32px 80px rgba(0,0,0,.5);   /* Mega menu, dropdowns on dark */
  --shadow-float: 0 8px 24px rgba(0,0,0,.4);   /* WhatsApp button */
  --shadow-sticky: 0 10px 24px -14px rgba(0,0,0,.6);   /* Sticky nav */
  --shadow-gold: 0 4px 20px rgba(243,189,0,.3);   /* Primary button glow */

  /* 7. Layout (desktop values; mobile overrides below) */
  --container: 1248px;   /* Content max width (1440 − 2×96) */
  --gutter: 96px;        /* Page side padding */
  --section-y: 104px;    /* Section top/bottom padding */
  --nav-h: 64px;         /* Header height */
  --nav-h-sticky: 56px;  /* Header after scroll */
  --touch: 44px;         /* Minimum tap target */
  --control-h: 56px;     /* Buttons & inputs height */

  /* 8. Layering */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-drawer: 50;
  --z-toast: 60;

  /* 9. Motion */
  --duration-fast: 150ms;          /* Hover colour, focus */
  --duration-base: 200ms;          /* Chevrons, toggles */
  --duration-slow: 300ms;          /* Drawer, menus */
  --ease-out: cubic-bezier(.2,.8,.2,1); /* Enter / open */
  --ease-in: cubic-bezier(.4,0,1,1); /* Exit / close */

  /* 10. Focus */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
}

/* Dark sections: hero, nav, trainers, CTA, footer */
.surface-dark,
[data-surface="dark"] {
  --color-bg: var(--ink-950);
  --color-bg-alt: var(--ink-900);
  --color-bg-cream: var(--ink-850);
  --color-surface: var(--ink-850);
  --color-surface-hover: var(--ink-800);
  --color-surface-sunken: var(--ink-750);
  --color-heading: var(--white);
  --color-text: var(--gray-450);
  --color-text-secondary: var(--gray-400);
  --color-text-muted: var(--gray-400);
  --color-border: var(--ink-700);
  --color-border-control: var(--ink-600);
  --color-border-strong: var(--ink-500);
  --color-accent-hover: var(--gold-400);
  --color-accent-text: var(--gold-500);
  --color-accent-soft: var(--ink-750);
  --color-success: var(--green-400);
  --color-error: var(--red-300);
  --color-error-soft: var(--ink-850);
  --color-urgency: var(--orange-300);
  --color-focus: var(--gold-500);
  --focus-ring: 2px solid var(--color-focus);
  color-scheme: dark;
}

/* Light surface inside a dark one (e.g. white dropdown panels under the dark nav).
   Restores the default light semantic tokens. */
.surface-light,
[data-surface="light"] {
  --color-bg: var(--white);
  --color-bg-alt: var(--gray-50);
  --color-bg-cream: var(--gold-50);
  --color-surface: var(--white);
  --color-surface-hover: var(--gray-50);
  --color-surface-sunken: var(--gray-100);
  --color-heading: var(--ink-950);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-border-control: var(--gray-300);
  --color-border-strong: var(--gray-500);
  --color-accent-hover: var(--gold-600);
  --color-accent-text: var(--gold-800);
  --color-accent-soft: var(--gold-50);
  --color-success: var(--green-700);
  --color-error: var(--red-700);
  --color-error-soft: var(--red-50);
  --color-urgency: var(--orange-700);
  --color-focus: var(--gray-900);
  --focus-ring: 2px solid var(--color-focus);
  color-scheme: light;
}

/* Breakpoints: sm 480px · md 768px · lg 1024px (desktop nav) · xl 1280px */
@media (max-width: 1023px) {
  :root {
    --gutter: 16px;
    --section-y: 64px;
    --nav-h: 56px;
    --control-h: 52px;
  }
}

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

/* Minimal base. The body rule is opt-in (class="tp-page") so legacy pages,
   which still use their own stylesheets, keep their current look. */
html { -webkit-text-size-adjust: 100%; }
body.tp-page {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}