/* ============================================
   BRAVOLISA DESIGN TOKENS
   Single source of truth for all surfaces.
   ============================================ */

/* Self-hosted brand fonts — GDPR-clean (no Google CDN call).
   Variable TTFs in deploy/fonts/, served by Vercel. */
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Lora-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── PRIMARY COLORS ── */
  --sky-50:  #EBF5FF;
  --sky-100: #D0E8FF;
  --sky-200: #A8D4FF;
  --sky-300: #7CBEF7;
  --sky-400: #5EAEF0;
  --sky-500: #4A9ADE;
  --sky-600: #3880C0;
  --sky-700: #2A669D;
  --sky-800: #1D4D7A;
  --sky-900: #103458;

  --lavender-50:  #F3EEFF;
  --lavender-100: #E4D6FF;
  --lavender-200: #CFBAF7;
  --lavender-300: #B89BF0;
  --lavender-400: #A47DE8;
  --lavender-500: #9068D6;
  --lavender-600: #7A55BB;
  --lavender-700: #63449B;
  --lavender-800: #4C347A;
  --lavender-900: #36255A;

  /* ── SECONDARY / ACCENT ── */
  --green-50:  #EDFAE8;
  --green-100: #D4F2C8;
  --green-200: #A8E08E;
  --green-300: #7DCC5A;
  --green-400: #5FB83E;
  --green-500: #4D9B33;
  --green-600: #3E7E29;
  --green-700: #3A5F2D;
  --green-800: #2C4623;
  --green-900: #1E2D19;

  --earth-50:  #FBF5EE;
  --earth-100: #F5E6D4;
  --earth-200: #E8CBA8;
  --earth-300: #D4A872;
  --earth-400: #C49A6C;
  --earth-500: #A8805A;
  --earth-600: #8C6848;
  --earth-700: #6E5038;
  --earth-800: #503A28;
  --earth-900: #35261A;

  /* Horizon · indigo-violet bridge between sky and lavender.
     Reserved for neutral state communication (Scheduled, queued)
     so primary sky stays unambiguous. */
  --horizon-50:  #EEF1FF;
  --horizon-100: #D6DDFF;
  --horizon-200: #A4B4FF;
  --horizon-300: #8294F0;
  --horizon-400: #6275DC;
  --horizon-500: #4C5EB8;
  --horizon-600: #3D4C94;
  --horizon-700: #2F3A72;

  --coral-50:  #FDF0EC;
  --coral-100: #FADDD5;
  --coral-200: #F2B8A8;
  --coral-300: #E8937A;
  --coral-400: #E07A5F;
  --coral-500: #D06A4F;
  --coral-600: #B85A42;
  --coral-700: #964836;
  --coral-800: #74382A;
  --coral-900: #52281E;

  /* ── SEMANTIC ── */
  --success: #4D9B33;
  --warning: #D4A872;
  --error:   #D06A4F;
  --info:    #5EAEF0;

  /* ── NEUTRALS ── */
  --white:    #FFFFFF;
  --snow:     #FAFBFD;
  --cloud:    #F5F7FB;
  --mist:     #EDF0F5;
  --silver:   #D8DCE2;
  --slate:    #9BA3B0;
  --storm:    #7B8899;
  --ink:      #4A5568;
  --charcoal: #2D3748;
  --night:    #1E2A3A;
  --midnight: #1A1E2E;
  --deep:     #0E0C16;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* ── SPACING (8px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── RADIUS ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  30px;
  --radius-pill: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 3px rgba(30,42,58,0.06);
  --shadow-md:  0 4px 12px rgba(30,42,58,0.08);
  --shadow-lg:  0 12px 40px rgba(30,42,58,0.1);
  --shadow-xl:  0 25px 60px rgba(30,42,58,0.14);
  --shadow-sky: 0 12px 40px rgba(94,174,240,0.25);
  --shadow-lavender: 0 12px 40px rgba(122,85,187,0.35);
  --shadow-coral: 0 10px 35px rgba(224,122,95,0.28);

  /* ── MOTION ── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  150ms;  /* hovers */
  --dur-base:  220ms;  /* state changes */
  --dur-slow:  320ms;  /* entrances */
  --dur-max:   400ms;  /* hard ceiling, never exceed */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 75ms;
    --dur-base: 110ms;
    --dur-slow: 160ms;
    /* no transforms — fade only */
  }
}