/* ═══════════════════════════════════════════════════════════
   TechSutra Design System - All Tokens
   Load this file first before any other CSS.
   Never use raw color/spacing/font values in other files.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── BACKGROUNDS (dark mode default) ─────────── */
  --bg:        #060914;
  --bg-s:      #0b1024;
  --bg-c:      #101828;
  --bg-ch:     #162040;
  --bg-glass:  rgba(16,24,40,.7);

  /* ── TEXT ─────────────────────────────────────── */
  --text-1:    #edeef5;
  --text-2:    #8a94b0;
  --text-3:    #4a5470;
  --text-inv:  #060914;

  /* ── SURFACES / BORDERS ───────────────────────── */
  --b0: rgba(255,255,255,.04);
  --b1: rgba(255,255,255,.08);
  --b2: rgba(255,255,255,.15);

  /* ── BRAND - TechSutra Gold ───────────────────── */
  --gold:     #c9a84c;
  --gold-l:   #e0bf6e;
  --gold-d:   rgba(201,168,76,.12);
  --gold-g:   rgba(201,168,76,.26);

  /* ── BRAND - Resona Coral ─────────────────────── */
  --rn:       #e8756a;
  --rn-l:     #f59e94;
  --rn-d:     rgba(232,117,106,.10);
  --rn-b:     rgba(232,117,106,.22);
  --rn-g:     rgba(232,117,106,.20);

  /* ── BRAND - Vākio Teal + Gold ────────────────── */
  --vk:       #00b4a2;
  --vk-l:     #2dd4c4;
  --vk2:      #c49a3c;
  --vk-d:     rgba(0,180,162,.10);
  --vk-b:     rgba(0,180,162,.22);
  --vk-g:     rgba(0,180,162,.20);

  /* ── TYPOGRAPHY ───────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, sans-serif;
  --font-vakio:    'Playfair Display', Georgia, serif;   /* Vākio wordmark + inline brand name */
  --font-hindi:    'Noto Serif Devanagari', serif;       /* Hindi tagline only */

  /* ── FONT SIZES ───────────────────────────────── */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-lead: clamp(1.25rem, 1.8vw, 1.375rem); /* lead paragraph — hero sub-copy */
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.5rem;
  --text-4xl:  clamp(2.5rem, 4vw, 3.5rem);

  /* ── SPACING ──────────────────────────────────── */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── GEOMETRY ─────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-pill:100px;

  /* ── SHADOWS ──────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.25);
  --shadow-card: 0 4px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 8px 40px rgba(0,0,0,.45);
  --shadow-rn:   0 8px 32px rgba(232,117,106,.22);
  --shadow-vk:   0 8px 32px rgba(0,180,162,.22);
  --shadow-gold: 0 8px 32px rgba(201,168,76,.2);

  /* ── Extended brand alphas (decorative backgrounds / glows) ── */
  --vk-gl:   rgba(0,180,162,.06);      /* very-faint teal — card hover backgrounds */
  --rn-gl:   rgba(232,117,106,.06);    /* very-faint coral — card hover backgrounds */
  --gold-gl: rgba(201,168,76,.14);     /* faint gold — ghost/watermark text colour */

  /* ── MOTION ───────────────────────────────────── */
  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-spring: 300ms cubic-bezier(.34,1.56,.64,1);

  /* ── LAYOUT ───────────────────────────────────── */
  --max-w:  1200px;
  --nav-h:  68px;
  --abar-h: 3px;
}

/* ── LIGHT MODE OVERRIDES ──────────────────────── */
/* Clean white palette — mirrors the dark theme's contrast structure:
   pure white page → slightly tinted card surface → accented hover surface.
   The `-l` accent variants are deliberately DARKER than base so accent
   text remains legible on a white surface. */
[data-theme="light"] {
  /* White page, noticeably tinted card surfaces so cards lift off the page */
  --bg:       #ffffff;
  --bg-s:     #eef1f9;
  --bg-c:     #e4e9f5;
  --bg-ch:    #d8dff0;
  --bg-glass: rgba(255,255,255,.94);

  /* High-contrast text — near-black primary, dark navy body, medium tertiary */
  --text-1:   #080e1e;
  --text-2:   #1c2540;
  --text-3:   #485068;
  --text-inv: #ffffff;

  /* Darker borders — clean definition on cards, pills and tabs */
  --b0: rgba(12,17,32,.13);
  --b1: rgba(12,17,32,.22);
  --b2: rgba(12,17,32,.36);

  /* Brand accent overrides — darker `-l` variants for legible text on white,
     stronger alphas so pills and chips read as distinct coloured surfaces.
     Base brand colours (--gold/--rn/--vk) stay unchanged so gradients,
     dots and the abar strip are consistent across themes. */
  --gold-l:   #7a5d1a;
  --gold-d:   rgba(201,168,76,.20);
  --gold-g:   rgba(201,168,76,.42);

  --rn-l:     #aa3f36;
  --rn-d:     rgba(232,117,106,.18);
  --rn-b:     rgba(232,117,106,.45);
  --rn-g:     rgba(232,117,106,.28);

  --vk-l:     #006e64;
  --vk-d:     rgba(0,180,162,.18);
  --vk-b:     rgba(0,180,162,.45);
  --vk-g:     rgba(0,180,162,.28);

  /* Extended alpha overrides */
  --gold-gl: rgba(122,93,26,.22);

  /* Stronger shadows to reinforce card lift */
  --shadow-sm:   0 1px 6px rgba(0,0,0,.10);
  --shadow-card: 0 2px 14px rgba(0,0,0,.11);
  --shadow-lift: 0 6px 28px rgba(0,0,0,.15);
  --shadow-rn:   0 4px 18px rgba(170,63,54,.22);
  --shadow-vk:   0 4px 18px rgba(0,110,100,.22);
  --shadow-gold: 0 4px 18px rgba(122,93,26,.22);
}

/* Very subtle brand-tinted radial on white — adds warmth without
   yellowing the page; far lighter than the old cream gradient. */
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(201,168,76,.05), transparent 55%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(0,180,162,.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Brand-name inline treatment ────────────────────
   Wrap every in-text "Vākio" mention (outside the
   vk-wordmark h1) in <span class="brand-vk"> so the ā
   macron renders via Playfair Display Bold - where the
   macron extends from V to k, matching the logotype. */
.brand-vk {
  font-family: var(--font-vakio);
  font-weight: 700;
}