/* ==========================================================================
   Shanthi Self Rental Cars — Design Tokens
   Two engineered themes:
     :root                 → Dark (default): obsidian + champagne gold
     [data-theme="light"]  → Light: warm white + charcoal + deep amber gold
   Every themeable colour in the site resolves through a token below, so the
   toggle never has to touch a component rule.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces (obsidian ladder) --------------------------------------- */
  --bg-void:        #07090E;
  --bg-base:        #0B0E14;
  --bg-raised:      #10141D;
  --bg-elevated:    #161C26;
  --bg-inset:       #1C2330;

  /* ---- Champagne gold accents ------------------------------------------- */
  --gold:           #D4AF37;
  --gold-bright:    #E5C07B;
  --gold-amber:     #F39C12;
  --gold-deep:      #A9862A;
  --gold-wash:      rgba(212, 175, 55, 0.10);
  --gold-wash-soft: rgba(212, 175, 55, 0.05);
  --gold-line:      rgba(212, 175, 55, 0.28);

  --gradient-gold:  linear-gradient(120deg, #E5C07B 0%, #D4AF37 42%, #F39C12 100%);
  --gradient-sheen: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0) 66%);

  /* ---- Text hierarchy ---------------------------------------------------- */
  --text-primary:   #FFFFFF;
  --text-body:      #CBD5E1;
  --text-muted:     #94A3B8;
  --text-faint:     #64748B;
  --text-on-gold:   #0B0E14;

  /* ---- Glass surfaces ---------------------------------------------------- */
  --glass-bg:       rgba(255, 255, 255, 0.035);
  --glass-bg-hover: rgba(255, 255, 255, 0.055);
  --glass-border:   rgba(255, 255, 255, 0.07);
  --glass-border-hi:rgba(255, 255, 255, 0.14);
  --glass-blur:     blur(16px);

  /* ---- Themed chrome ----------------------------------------------------- */
  --nav-bg-scrolled: rgba(11, 14, 20, 0.80);
  --drawer-bg:       rgba(11, 14, 20, 0.97);
  --sticky-bg:       rgba(11, 14, 20, 0.90);
  --scrim:           rgba(4, 6, 10, 0.65);
  --tag-bg:          rgba(11, 14, 20, 0.72);
  --logo-plate:      transparent;
  --logo-plate-pad:  0;

  /* ---- Themed composites -------------------------------------------------- */
  --hero-bg:
    radial-gradient(120% 90% at 78% 12%, rgba(212, 175, 55, 0.13), transparent 58%),
    radial-gradient(100% 80% at 12% 88%, rgba(243, 156, 18, 0.07), transparent 60%),
    linear-gradient(180deg, #07090E 0%, #0B0E14 55%, #10141D 100%);
  --grid-line:      rgba(212, 175, 55, 0.12);
  --card-grad:      linear-gradient(160deg, #161C26, #10141D);
  --media-grad:
    radial-gradient(70% 90% at 50% 100%, rgba(212, 175, 55, 0.14), transparent 65%),
    linear-gradient(180deg, #1C2330, #10141D);
  --spotlight-grad:
    radial-gradient(90% 120% at 88% 10%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(135deg, #161C26, #10141D 60%, #0B0E14);
  --panel-grad:     linear-gradient(135deg, #12161F 0%, #0C1017 55%, #0A0D13 100%);
  --contact-grad:
    radial-gradient(80% 70% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 62%),
    linear-gradient(180deg, #0B0E14, #0B0E14);
  --ghost-num:      rgba(255, 255, 255, 0.035);
  --grain-opacity:  0.03;
  --glow-opacity:   0.5;
  --silhouette-filter: grayscale(1) brightness(1.25);

  /* ---- WhatsApp channel --------------------------------------------------- */
  --wa-bg:        rgba(37, 211, 102, 0.10);
  --wa-bg-hover:  rgba(37, 211, 102, 0.18);
  --wa-border:    rgba(37, 211, 102, 0.36);
  --wa-border-hi: rgba(37, 211, 102, 0.60);
  --wa-text:      #4ADE80;
  --wa-shadow:    rgba(37, 211, 102, 0.18);

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md:      0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-lg:      0 28px 64px rgba(0, 0, 0, 0.50);
  --shadow-gold:    0 14px 40px rgba(212, 175, 55, 0.22);
  --shadow-gold-hi: 0 18px 48px rgba(212, 175, 55, 0.34);

  /* ---- Typography --------------------------------------------------------- */
  --font-display: 'Outfit', 'Syne', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: clamp(0.68rem, 0.62rem + 0.25vw, 0.78rem);
  --fs-micro:   clamp(0.74rem, 0.70rem + 0.20vw, 0.82rem);
  --fs-small:   clamp(0.84rem, 0.80rem + 0.22vw, 0.94rem);
  --fs-body:    clamp(0.95rem, 0.90rem + 0.28vw, 1.06rem);
  --fs-lead:    clamp(1.02rem, 0.95rem + 0.40vw, 1.20rem);
  --fs-h3:      clamp(1.18rem, 1.05rem + 0.62vw, 1.55rem);
  --fs-h2:      clamp(1.95rem, 1.45rem + 2.10vw, 3.35rem);
  --fs-h1:      clamp(2.10rem, 1.45rem + 2.90vw, 4.10rem);

  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-body:    1.72;

  --tracking-wide:  0.16em;
  --tracking-wider: 0.28em;

  /* ---- Spacing ------------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---- Layout ------------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --gutter:         clamp(1.15rem, 0.7rem + 2.2vw, 3rem);
  --radius-sm:      10px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-xl:      32px;
  --radius-pill:    999px;

  /* ---- Motion -------------------------------------------------------------- */
  --ease-out-luxe:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-luxe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   180ms;
  --dur-base:   380ms;
  --dur-slow:   720ms;
  --dur-reveal: 900ms;
  --dur-theme:  300ms;

  /* ---- Chrome -------------------------------------------------------------- */
  --nav-h:         84px;
  --nav-h-compact: 70px;
  --logo-h:        64px;
  --sticky-bar-h:  0px;
  --z-nav:      100;
  --z-drawer:   120;
  --z-sticky:   110;
}

/* ==========================================================================
   Light theme — a bespoke warm-white luxury palette, not an inversion.
   Gold shifts to a deeper amber so it keeps AA contrast on white.
   ========================================================================== */

[data-theme="light"] {
  color-scheme: light;

  --bg-void:        #EDF1F7;
  --bg-base:        #F8F9FB;
  --bg-raised:      #FFFFFF;
  --bg-elevated:    #F1F4F8;
  --bg-inset:       #E7ECF3;

  --gold:           #B8860B;
  --gold-bright:    #8C6408;
  --gold-amber:     #D4900F;
  --gold-deep:      #6B4C05;
  --gold-wash:      rgba(184, 134, 11, 0.10);
  --gold-wash-soft: rgba(184, 134, 11, 0.05);
  --gold-line:      rgba(184, 134, 11, 0.30);

  --gradient-gold:  linear-gradient(120deg, #C8951A 0%, #B8860B 45%, #8C6408 100%);
  --gradient-sheen: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.30) 48%, rgba(255,255,255,0) 66%);

  --text-primary:   #0F172A;
  --text-body:      #334155;
  --text-muted:     #475569;
  --text-faint:     #64748B;
  --text-on-gold:   #FFFFFF;

  --glass-bg:       rgba(15, 23, 42, 0.028);
  --glass-bg-hover: rgba(15, 23, 42, 0.055);
  --glass-border:   rgba(15, 23, 42, 0.08);
  --glass-border-hi:rgba(15, 23, 42, 0.14);

  --nav-bg-scrolled: rgba(255, 255, 255, 0.86);
  --drawer-bg:       rgba(255, 255, 255, 0.98);
  --sticky-bg:       rgba(255, 255, 255, 0.93);
  --scrim:           rgba(15, 23, 42, 0.38);
  --tag-bg:          rgba(255, 255, 255, 0.88);

  /* Logo is transparent PNG asset without any container background plate */
  --logo-plate:     transparent;
  --logo-plate-pad: 0;

  --hero-bg:
    radial-gradient(120% 90% at 78% 12%, rgba(184, 134, 11, 0.16), transparent 58%),
    radial-gradient(100% 80% at 12% 88%, rgba(212, 144, 15, 0.10), transparent 60%),
    linear-gradient(180deg, #FFFDF7 0%, #FDF8EE 55%, #F9F2E4 100%);
  --grid-line:      rgba(184, 134, 11, 0.14);
  --card-grad:      linear-gradient(160deg, #FFFFFF, #F5F8FC);
  --media-grad:
    radial-gradient(70% 90% at 50% 100%, rgba(184, 134, 11, 0.12), transparent 65%),
    linear-gradient(180deg, #EEF2F8, #FFFFFF);
  --spotlight-grad:
    radial-gradient(90% 120% at 88% 10%, rgba(184, 134, 11, 0.14), transparent 60%),
    linear-gradient(135deg, #FFFFFF, #F6F9FC 60%, #EFF3F8);
  --panel-grad:     linear-gradient(135deg, #FFFFFF 0%, #F4F7FB 55%, #EDF1F7 100%);
  --contact-grad:
    radial-gradient(80% 70% at 50% 0%, rgba(184, 134, 11, 0.11), transparent 62%),
    linear-gradient(180deg, #F8F9FB, #F8F9FB);
  --ghost-num:      rgba(15, 23, 42, 0.05);
  --grain-opacity:  0.018;
  --glow-opacity:   0.30;
  --silhouette-filter: grayscale(1) brightness(0.55) contrast(1.15);

  --wa-bg:        rgba(22, 163, 74, 0.09);
  --wa-bg-hover:  rgba(22, 163, 74, 0.16);
  --wa-border:    rgba(22, 163, 74, 0.34);
  --wa-border-hi: rgba(22, 163, 74, 0.58);
  --wa-text:      #15803D;
  --wa-shadow:    rgba(22, 163, 74, 0.16);

  /* Soft daylight diffusion instead of hard black drop shadows. */
  --shadow-sm:      0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md:      0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-lg:      0 28px 64px rgba(15, 23, 42, 0.14);
  --shadow-gold:    0 14px 40px rgba(184, 134, 11, 0.20);
  --shadow-gold-hi: 0 18px 48px rgba(184, 134, 11, 0.30);
}