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

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Lora:wght@400;500;600;700&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;

  --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);
}