/* ==========================================================================
   Lilo Socials — Design Tokens
   Ocean-inspired palette built from brand colours:
   #f0daa5 sand · #f6f4f1 cream · #b9cfeb sky · #5353de indigo · #503e10 ink
   ========================================================================== */

:root {
  /* ---- Brand colours (source) ---- */
  --brand-sand:   #f0daa5;
  --brand-cream:  #f6f4f1;
  --brand-sky:    #b9cfeb;
  --brand-indigo: #5353de;
  --brand-ink:    #503e10;

  /* ---- Derived tints & shades ---- */
  --sand-soft:    #f7e8c8;
  --sand-deep:    #d9b872;
  --cream-soft:   #fbfaf8;
  --sky-soft:     #dfe9f8;
  --sky-deep:     #8fb0dc;
  --indigo-soft:  #8a8ae8;
  --indigo-deep:  #3d3dab;
  --navy-deep:    #201f4d; /* deep ocean — dark sections, footer */
  --ink-soft:     #8a7248;

  /* ---- Suggested extensions (ocean palette per brief; easy to drop) ---- */
  --seafoam:      #a9e0d1;
  --coral:        #f2a488;

  /* ---- Cabana stripe tones — warm-only, low contrast, never the ocean palette ---- */
  --stripe-a:     var(--cream-soft);
  --stripe-b:     var(--sand-soft);

  /* ---- Semantic colour roles ---- */
  --bg-page:        var(--brand-cream);
  --bg-surface:     var(--cream-soft);
  --bg-section-alt: var(--sky-soft);
  --bg-dark:        var(--navy-deep);

  --text-primary:   var(--brand-ink);
  --text-muted:     var(--ink-soft);
  --text-inverse:   var(--brand-cream);

  --brand-primary:       var(--brand-indigo);
  --brand-primary-hover: var(--indigo-deep);
  --brand-primary-soft:  var(--indigo-soft);

  --accent-sun:     var(--brand-sand);
  --accent-seafoam: var(--seafoam);
  --accent-coral:   var(--coral);

  --border-subtle:  rgba(80, 62, 16, 0.12);
  --border-light:   rgba(255, 255, 255, 0.4);

  /* ---- Typography ---- */
  --font-display: 'Noto Serif Display', ui-serif, Georgia, serif; /* wdth axis pinned to 100 (normal) — tight tracking does the work, not condensed letterforms */
  --font-body:    'Garet', -apple-system, BlinkMacSystemFont, sans-serif; /* falls back to system sans until licensed font files are supplied */

  --text-display: clamp(2.75rem, 2rem + 4vw, 6.25rem);
  --text-h1:      clamp(2.25rem, 1.7rem + 2.8vw, 4.25rem);
  --text-h2:      clamp(1.85rem, 1.5rem + 1.8vw, 3rem);
  --text-h3:      clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --text-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --text-body:    1.0625rem;
  --text-small:   0.9rem;
  --text-caption: 0.8rem;

  --leading-tight: 1.08;
  --leading-snug:  1.4;
  --leading-body:  1.8;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.089em; /* "-89" tight tracking on display serif titles */
  --tracking-nav:     0.045em;
  --tracking-wide:    0.16em;   /* uppercase eyebrows / section labels */
  --tracking-button:  0.14em;

  /* ---- Spacing scale (8px base, generous) ---- */
  --space-1: 0.5rem;   /* 8  */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-8: 8rem;     /* 128 */
  --space-9: 10rem;    /* 160 */

  --section-pad-y: clamp(5rem, 3.5rem + 7vw, 11rem);
  --container-pad-x: clamp(1.25rem, 1rem + 3vw, 4rem);
  --container-max: 1320px;
  --content-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); /* heading -> paragraph, label -> heading */

  /* ---- Radius ---- */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-xl:   48px;
  --radius-full: 999px;

  /* ---- Shadows (soft, tinted — never pure black) ---- */
  --shadow-sm: 0 2px 10px rgba(32, 31, 77, 0.06);
  --shadow-md: 0 10px 30px rgba(32, 31, 77, 0.10);
  --shadow-lg: 0 24px 60px rgba(32, 31, 77, 0.14);
  --shadow-glow: 0 0 40px rgba(83, 83, 222, 0.25);
  --shadow-glow-sun: 0 0 40px rgba(240, 218, 165, 0.35);
  --shadow-float: 0 30px 40px -20px rgba(32, 31, 77, 0.22);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-water:   cubic-bezier(0.37, 0, 0.63, 1);

  --duration-fast: 0.2s;
  --duration-base: 0.45s;
  --duration-slow: 0.9s;
  --duration-float: 6s;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-base: 0.01s;
    --duration-slow: 0.01s;
    --duration-float: 0.01s;
  }
}