/* ==========================================================================
   Legacy Buddy: Brand Design Tokens
   tokens.css
   Palette "Ink + Emerald + Ivory": deep blue-black sections, a refined modern
   emerald accent, and warm ivory neutrals that complement the cream logo.
   Load this file FIRST, before global.css and animations.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Brand color system
     Ink = primary dark (hero, nav, footer, headings).
     Emerald = action + accent (growth, wealth).
     Ivory = warm light canvas.
     --------------------------------------------------------------------- */
  --lb-ink: #0C1222;           /* deep blue-black: dark sections, headings */
  --lb-ink-2: #070B16;         /* near-black: gradient end */
  --lb-ink-3: #111A30;         /* elevated dark surface */

  --lb-emerald: #12B886;       /* modern jewel emerald: primary accent */
  --lb-emerald-strong: #0B7A57;/* deeper emerald: text on light */
  --lb-emerald-soft: #E6F6EF;  /* light emerald tint */
  --lb-emerald-glow: #21D9A1;  /* luminous emerald: rings, auroras, on-dark accents */

  --lb-ivory: #F7F4EC;         /* warm light page background */
  --lb-ivory-2: #FBF9F3;       /* warm card surface */
  --lb-cream: #EFE9DC;         /* warm tint / borders */

  /* Gradients */
  --lb-grad-primary: linear-gradient(135deg, #0FA277 0%, #19C794 100%);
  --lb-grad-primary-hover: linear-gradient(135deg, #12B886 0%, #2BE0AC 100%);
  --lb-grad-hero: linear-gradient(157deg, #0F2A33 0%, #0C1222 52%, #070B16 100%);
  --lb-grad-accent: linear-gradient(120deg, #12B886 0%, #0C1222 100%);

  /* ---------------------------------------------------------------------
     Legacy aliases
     Existing component CSS references these names; they now resolve to the
     Ink + Emerald + Ivory palette so the whole system re-skins from here.
     --------------------------------------------------------------------- */
  --lb-navy: #0C1222;
  --lb-navy-dark: #070B16;
  --lb-navy-light: #12B886;
  --lb-blue: #12B886;          /* primary accent -> emerald */
  --lb-blue-strong: #0FA277;   /* button base */
  --lb-blue-deep: #0C1222;     /* dark bg */
  --lb-blue-deeper: #070B16;
  --lb-blue-soft: #E6F6EF;     /* emerald tint */
  --lb-indigo: #21D9A1;        /* luminous emerald accent */
  --lb-violet: #21D9A1;        /* aurora accent -> emerald glow */
  --lb-gold: #12B886;          /* primary accent alias -> emerald */
  --lb-gold-light: #21D9A1;
  --lb-gold-pale: #E6F6EF;
  --lb-green: #12B886;
  --lb-green-strong: #0B7A57;
  --lb-green-soft: #E6F6EF;

  /* ---------------------------------------------------------------------
     Status colors (non-brand): score bands, form errors
     --------------------------------------------------------------------- */
  --lb-red: #E0584E;
  --lb-red-pale: #FBECEA;
  --lb-amber: #E0A12E;
  --lb-amber-pale: #FBF1DE;

  /* ---------------------------------------------------------------------
     Neutrals and surfaces (warm, premium)
     --------------------------------------------------------------------- */
  --lb-white: #FFFFFF;
  --lb-off-white: #F7F4EC;     /* warm ivory section background */
  --lb-lavender: #F3EFE5;      /* warm cream tint (CTA panel etc.) */
  --lb-silver: #D7D1C4;
  --lb-silver-light: #ECE7DB;

  --lb-text-dark: #0C1222;
  --lb-text-body: #3F4350;
  --lb-text-light: #847F73;

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --lb-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* big editorial headings */
  --lb-font-heading: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lb-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes */
  --lb-text-xs: 0.75rem;
  --lb-text-sm: 0.875rem;
  --lb-text-base: 1rem;
  --lb-text-lg: 1.125rem;
  --lb-text-xl: 1.25rem;
  --lb-text-2xl: 1.5rem;
  --lb-text-3xl: 1.875rem;
  --lb-text-4xl: 2.25rem;
  --lb-text-5xl: 3rem;
  --lb-text-6xl: 3.75rem;

  /* Line heights */
  --lb-leading-tight: 1.15;
  --lb-leading-snug: 1.3;
  --lb-leading-normal: 1.5;
  --lb-leading-relaxed: 1.7;

  /* Letter spacing */
  --lb-tracking-tight: -0.02em;
  --lb-tracking-normal: 0;
  --lb-tracking-wide: 0.08em;
  --lb-tracking-wider: 0.16em;

  /* ---------------------------------------------------------------------
     Spacing scale
     --------------------------------------------------------------------- */
  --lb-space-1: 0.25rem;
  --lb-space-2: 0.5rem;
  --lb-space-3: 0.75rem;
  --lb-space-4: 1rem;
  --lb-space-6: 1.5rem;
  --lb-space-8: 2rem;
  --lb-space-10: 2.5rem;
  --lb-space-12: 3rem;
  --lb-space-16: 4rem;
  --lb-space-20: 5rem;
  --lb-space-24: 6rem;
  --lb-space-32: 8rem;

  /* ---------------------------------------------------------------------
     Radii (generous, premium)
     --------------------------------------------------------------------- */
  --lb-radius-sm: 6px;
  --lb-radius-md: 10px;
  --lb-radius-lg: 14px;
  --lb-radius-xl: 18px;
  --lb-radius-2xl: 26px;
  --lb-radius-full: 9999px;

  /* ---------------------------------------------------------------------
     Shadows (soft, ink-tinted)
     --------------------------------------------------------------------- */
  --lb-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.06);
  --lb-shadow-md: 0 8px 24px rgba(12, 18, 34, 0.08);
  --lb-shadow-lg: 0 18px 46px rgba(12, 18, 34, 0.12);
  --lb-shadow-xl: 0 30px 72px rgba(12, 18, 34, 0.16);

  /* ---------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------- */
  --lb-transition-fast: 150ms ease;
  --lb-transition-base: 250ms ease;
  --lb-transition-slow: 400ms ease;
  --lb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --lb-z-nav: 100;
  --lb-z-modal: 200;
  --lb-z-overlay: 150;
  --lb-z-progress: 250;

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --lb-container-max: 1280px;
  --lb-nav-height: 76px;
  --lb-announcement-height: 44px;
}