/* =========================================================================
   Design tokens: Varun Malhotra coaching site
   Philosophy: "Editorial, restrained" (Dieter Rams discipline with an
   Editorial/Magazine serif accent). See .design/coaching-site/DESIGN_TOKENS.md
   for the reasoning and the contrast checks.

   Fonts (Google Fonts, load in <head>):
   Hanken Grotesk 400/500/600 + Instrument Serif 400 regular & italic
   https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- Color: backgrounds ---------- */
  --color-bg-primary:   #FAF9F6;   /* warm off-white page */
  --color-bg-secondary: #F2F0EB;   /* alternate section tint, cards on tint */
  --color-bg-tertiary:  #E9E6DF;   /* wells, hover fills, menu panel */
  --color-bg-inverse:   #151514;   /* rare: inverse band if ever needed */

  /* ---------- Color: text ---------- */
  --color-text-primary:   #151514; /* 17.4:1 on bg */
  --color-text-secondary: #55524B; /* 7.4:1 on bg, 6.8:1 on bg-secondary */
  --color-text-tertiary:  #7A766E; /* 4.3:1 on bg (captions, meta, at least 14px only) */
  --color-text-inverse:   #FAF9F6;
  --color-text-link:      #2741D6; /* 7.1:1 on bg */

  /* ---------- Color: borders & rules ---------- */
  --color-border-primary:   #D8D4CA; /* thin decorative rules, card outlines */
  --color-border-secondary: #E6E2D9; /* faintest dividers */
  --color-border-strong:    #8F8A80; /* control outlines that must reach 3:1 */
  --color-border-focus:     #2741D6;

  /* ---------- Color: accent (cobalt) ---------- */
  --color-accent-primary:        #2741D6; /* button fill; white text 7.5:1 */
  --color-accent-primary-hover:  #1E34B3;
  --color-accent-primary-active: #18298F;
  --color-accent-on-primary:     #FFFFFF;
  --color-accent-secondary:      #151514; /* outline buttons use ink, not a 2nd hue */
  --color-accent-tint:           #E6E9FB; /* "Start here" tag background */

  /* ---------- Color: status ---------- */
  --color-status-success: #1C7247;
  --color-status-warning: #8F5B00;
  --color-status-error:   #B9322A;
  --color-status-info:    #2741D6;

  --color-surface-overlay: rgb(21 21 20 / 0.32);

  /* ---------- Spacing (8px base, rem) ---------- */
  --space-0:  0;
  --space-1:  0.125rem; /*  2px */
  --space-2:  0.25rem;  /*  4px */
  --space-3:  0.375rem; /*  6px */
  --space-4:  0.5rem;   /*  8px */
  --space-5:  0.75rem;  /* 12px */
  --space-6:  1rem;     /* 16px */
  --space-7:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-9:  3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-11: 6rem;     /* 96px */
  --space-12: 8rem;     /* 128px */

  /* Layout rhythm (fluid between 375px and 1280px) */
  --space-section: clamp(4rem, 2.5rem + 6.5vw, 8rem);   /* 64 → 128 between sections */
  --space-gutter:  clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* page side padding 20 → 40 */
  --space-stack:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); /* label → heading → body */

  /* ---------- Typography ---------- */
  --font-family-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* italic accent phrases, pull quote, prices */
  --font-family-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* body, UI, most headings */
  --font-family-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type ramp: fluid, about 1.2 ratio on mobile and 1.333 on desktop */
  --font-size-xs:   0.8125rem;                               /* 13: labels (uppercase) */
  --font-size-sm:   0.9375rem;                               /* 15: meta, captions */
  --font-size-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17: body */
  --font-size-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20: lead, card titles */
  --font-size-lg:   clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);    /* 20 → 24: h3 */
  --font-size-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);       /* 24 → 32: price, quote */
  --font-size-2xl:  clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);  /* 30 → 44: h2 */
  --font-size-3xl:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);    /* 36 → 60: large h2 / CTA */
  --font-size-4xl:  clamp(2.625rem, 1.65rem + 4.4vw, 5rem);     /* 42 → 80: hero h1 */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     600; /* intentionally capped: no 700 loaded */

  --line-height-tight:   1.08; /* hero & h2 */
  --line-height-snug:    1.25; /* h3, card titles */
  --line-height-normal:  1.55; /* body */
  --line-height-relaxed: 1.7;  /* long About copy */

  --letter-spacing-tight:  -0.025em; /* large sans headings */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.12em;   /* uppercase labels */

  /* ---------- Layout ---------- */
  --max-width-content: 33rem;  /* about 65-70 characters of body text (measured in task 13) */
  --max-width-wide:    72rem;  /* 1152: section grids */
  --max-width-page:    80rem;  /* 1280: header and footer bounds */

  --header-height: 4rem;       /* 64: also scroll-margin for anchors */

  --border-width:     1px;
  --border-radius-sm: 0.25rem;  /*  4: tags */
  --border-radius-md: 0.5rem;   /*  8: cards, menu panel */
  --border-radius-lg: 1rem;     /* 16: photo frame */
  --border-radius-full: 999px;  /* pill buttons */

  /* No decorative shadows (Rams). Only the mobile menu panel and focus ring use one. */
  --shadow-sm:    none;
  --shadow-md:    0 8px 24px rgb(21 21 20 / 0.08);
  --shadow-lg:    0 16px 40px rgb(21 21 20 / 0.10);
  --shadow-focus: 0 0 0 3px var(--color-bg-primary), 0 0 0 5px var(--color-border-focus);

  /* ---------- Components ---------- */
  --button-height:         3rem;    /* 48 */
  --button-height-compact: 2.75rem; /* 44: header pill, still meets the touch target */
  --button-padding-x:      1.5rem;
  --button-font-size:      1rem;
  --button-font-weight:    var(--font-weight-semibold);
  --button-radius:         var(--border-radius-full);

  --card-padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --card-radius:  var(--border-radius-md);
  --card-border:  var(--border-width) solid var(--color-border-primary);

  --rule: var(--border-width) solid var(--color-border-primary); /* section dividers */

  /* ---------- Motion ---------- */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  /* No bounce easing: the style allows no decorative motion. */

  /* ---------- Breakpoints (for reference; CSS can't use variables in @media) ----------
     sm 375 · md 768 · lg 1024 · xl 1280 · 2xl 1536 (mobile-first, min-width queries) */
}

/* ---------- Dark mode (low priority: tokens ready, design not polished) ----------
   Warm near-black to match the warm off-white. Contrast is slightly softer than pure
   white on black. The accent is lifted to a light periwinkle-cobalt, and buttons
   switch to dark text. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-primary:   #121211;
  --color-bg-secondary: #1A1A18;
  --color-bg-tertiary:  #242421;
  --color-bg-inverse:   #ECEAE4;
  --color-text-primary:   #ECEAE4;
  --color-text-secondary: #A8A49B;
  --color-text-tertiary:  #8A867D;
  --color-text-inverse:   #121211;
  --color-text-link:      #8C9BFF;
  --color-border-primary:   #34332F;
  --color-border-secondary: #282825;
  --color-border-strong:    #6E6A62;
  --color-border-focus:     #8C9BFF;
  --color-accent-primary:        #8C9BFF;
  --color-accent-primary-hover:  #A6B1FF;
  --color-accent-primary-active: #BCC4FF;
  --color-accent-on-primary:     #121211;
  --color-accent-secondary:      #ECEAE4;
  --color-accent-tint:           #23284A;
  --color-status-success: #5CC48D;
  --color-status-warning: #E0A548;
  --color-status-error:   #F07A70;
  --color-status-info:    #8C9BFF;
  --color-surface-overlay: rgb(0 0 0 / 0.55);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-primary:   #121211;
    --color-bg-secondary: #1A1A18;
    --color-bg-tertiary:  #242421;
    --color-bg-inverse:   #ECEAE4;
    --color-text-primary:   #ECEAE4;
    --color-text-secondary: #A8A49B;
    --color-text-tertiary:  #8A867D;
    --color-text-inverse:   #121211;
    --color-text-link:      #8C9BFF;
    --color-border-primary:   #34332F;
    --color-border-secondary: #282825;
    --color-border-strong:    #6E6A62;
    --color-border-focus:     #8C9BFF;
    --color-accent-primary:        #8C9BFF;
    --color-accent-primary-hover:  #A6B1FF;
    --color-accent-primary-active: #BCC4FF;
    --color-accent-on-primary:     #121211;
    --color-accent-secondary:      #ECEAE4;
    --color-accent-tint:           #23284A;
    --color-status-success: #5CC48D;
    --color-status-warning: #E0A548;
    --color-status-error:   #F07A70;
    --color-status-info:    #8C9BFF;
    --color-surface-overlay: rgb(0 0 0 / 0.55);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.45);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}