/* ============================================================
   Lake Mirror Classic - Design System Tokens
   Concours d'Elegance & Car Show · Lakeland, Florida
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Brand ---- */
  --french-blue:        #283B90;
  --french-blue-deep:   #1C2B6B;
  --french-blue-700:    #223273;
  --french-blue-300:    #5567B8;
  --french-blue-tint:   #EAECF6;

  /* ---- Neutrals ---- */
  --near-black:  #1A1A1A;
  --charcoal:    #262626;
  --body-gray:   #303030;
  --slate:       #565b6e;
  --mist:        #8b8fa3;
  --line:        #e4e6ef;
  --paper:       #F7F8FC;
  --white:       #FFFFFF;

  /* ---- Accent: disciplined champagne gold ---- */
  --gold:        #C2A14E;
  --gold-bright: #D4B765;
  --gold-deep:   #9A7E36;
  --gold-tint:   rgba(194,161,78,0.12);

  /* ---- Warm alternate (amber) ---- */
  --amber:       #EF8451;
  --amber-deep:  #D96A35;

  /* Active accent (swapped by Tweaks: gold <-> amber) */
  --accent:        var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep:   var(--gold-deep);
  --accent-tint:   var(--gold-tint);
  --on-accent:     #1A1A1A;

  /* ---- Type ---- */
  --font-display: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Albert Sans', system-ui, -apple-system, sans-serif;

  --t-hero:    clamp(2.6rem, 6vw, 4.5rem);   /* display hero */
  --t-h1:      clamp(2.125rem, 4.5vw, 3.25rem); /* 34 -> 52 */
  --t-h2:      clamp(1.75rem, 3vw, 2.25rem);    /* 28 -> 36 */
  --t-h3:      clamp(1.25rem, 1.6vw, 1.375rem); /* 20 -> 22 */
  --t-body:    clamp(1.0625rem, 1.2vw, 1.1875rem); /* 17 -> 19 */
  --t-lead:    clamp(1.1875rem, 1.6vw, 1.375rem);
  --t-eyebrow: 0.8125rem;  /* 13px */
  --t-small:   0.9375rem;

  /* ---- Radius ---- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm:   0 1px 2px rgba(20,24,48,0.06), 0 4px 12px rgba(20,24,48,0.05);
  --shadow-md:   0 4px 14px rgba(20,24,48,0.08), 0 18px 48px rgba(20,24,48,0.07);
  --shadow-lg:   0 12px 40px rgba(20,24,48,0.16), 0 40px 80px rgba(20,24,48,0.12);
  --shadow-gold: 0 8px 24px rgba(194,161,78,0.34);

  /* ---- Spacing rhythm ---- */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --container: 1240px;

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accent = amber variant */
:root[data-accent="amber"] {
  --accent:        var(--amber);
  --accent-bright: #F59B6E;
  --accent-deep:   var(--amber-deep);
  --accent-tint:   rgba(239,132,81,0.14);
  --on-accent:     #1A1A1A;
}

/* ============================================================
   THEME SURFACES
   ============================================================ */

/* Light (Variant B): white canvas, French-Blue panels */
:root[data-theme="light"] {
  --bg:          var(--paper);
  --surface:     var(--white);
  --surface-2:   #FBFCFE;
  --panel:       var(--french-blue);   /* french-blue containers hold content */
  --panel-ink:   #ffffff;
  --ink:         var(--near-black);
  --ink-2:       var(--body-gray);
  --ink-3:       var(--slate);
  --ink-faint:   var(--mist);
  --hairline:    var(--line);
  --hero-scrim:  radial-gradient(135% 130% at 0% 100%, rgba(20,28,72,0.94) 0%, rgba(28,43,107,0.62) 32%, rgba(8,10,24,0.10) 68%, rgba(8,10,24,0) 100%), linear-gradient(180deg, rgba(8,10,24,0.42) 0%, rgba(8,10,24,0.22) 42%, rgba(8,10,24,0.72) 100%);
  --nav-bg:      rgba(255,255,255,0.86);
  --nav-ink:     var(--near-black);
}

/* Dark (Variant A): French Blue / charcoal gallery canvas */
:root[data-theme="dark"] {
  --bg:          #11132B;
  --surface:     #1A1E40;
  --surface-2:   #20254B;
  --panel:       #161A38;
  --panel-ink:   #ffffff;
  --ink:         #F5F6FB;
  --ink-2:       #C4C8DE;
  --ink-3:       #9499BC;
  --ink-faint:   #6A6F94;
  --hairline:    rgba(255,255,255,0.10);
  --hero-scrim:  radial-gradient(135% 135% at 0% 100%, rgba(18,26,68,0.96) 0%, rgba(28,43,107,0.66) 34%, rgba(8,10,24,0.12) 70%, rgba(8,10,24,0) 100%), linear-gradient(180deg, rgba(8,10,24,0.50) 0%, rgba(8,10,24,0.28) 40%, rgba(8,10,24,0.82) 100%);
  --nav-bg:      #283b90;
  --nav-ink:     #F5F6FB;
}