/* =========================================================
   VELA DESIGN SYSTEM — TOKENS
   "Set Sail" — Navy authority, teal motion, editorial soul
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== BRAND PALETTE — pulled from the sail logo ===== */
  --vela-navy-50:  #EEF1F7;
  --vela-navy-100: #D6DCEA;
  --vela-navy-200: #AEB8D1;
  --vela-navy-300: #8291B5;
  --vela-navy-400: #566E99;
  --vela-navy-500: #3A4F7D;
  --vela-navy-600: #2D3F66;
  --vela-navy-700: #243555;  /* ← logo navy */
  --vela-navy-800: #1A2740;
  --vela-navy-900: #121B2E;
  --vela-navy-950: #0A1020;

  --vela-teal-50:  #E7F7F8;
  --vela-teal-100: #C6ECEF;
  --vela-teal-200: #95DBE0;
  --vela-teal-300: #5FC6CD;
  --vela-teal-400: #40B6BD;   /* ← logo teal */
  --vela-teal-500: #22A2AB;
  --vela-teal-600: #0F8B9E;   /* ← logo teal shadow */
  --vela-teal-700: #0A6E7E;
  --vela-teal-800: #0B5663;
  --vela-teal-900: #0B424C;

  /* Sand — warm neutral (the canvas the sail catches the wind on) */
  --vela-sand-50:  #FBF9F5;
  --vela-sand-100: #F5F1E9;
  --vela-sand-200: #EAE3D3;
  --vela-sand-300: #D7CBB0;
  --vela-sand-400: #B5A580;
  --vela-sand-500: #8A7B58;

  /* Semantic accents — pulled into the Vela key */
  --vela-success-300: #7ED4A8;
  --vela-success-500: #16A374;
  --vela-success-700: #0C6B4B;
  --vela-warn-300:    #FFD37A;
  --vela-warn-500:    #E8A53A;
  --vela-warn-700:    #9E6810;
  --vela-danger-300:  #F4A7A3;
  --vela-danger-500:  #D94A42;
  --vela-danger-700:  #932A24;
  --vela-info-300:    #9EC2F2;
  --vela-info-500:    #3D7DDB;
  --vela-info-700:    #1E4E96;

  /* Gray scale — cool, navy-tinted */
  --vela-gray-0:   #FFFFFF;
  --vela-gray-25:  #FBFBFC;
  --vela-gray-50:  #F6F7F9;
  --vela-gray-100: #EDEFF3;
  --vela-gray-200: #DCE0E9;
  --vela-gray-300: #BFC5D3;
  --vela-gray-400: #939AAB;
  --vela-gray-500: #6B7388;
  --vela-gray-600: #4D5569;
  --vela-gray-700: #373E52;
  --vela-gray-800: #232939;
  --vela-gray-900: #151A28;
  --vela-gray-950: #0A0E18;

  /* ===== SEMANTIC (LIGHT) ===== */
  --bg:           var(--vela-sand-50);
  --bg-subtle:    var(--vela-sand-100);
  --bg-muted:     var(--vela-gray-50);
  --surface:      #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--vela-gray-50);
  --surface-inverse: var(--vela-navy-900);

  --border:       var(--vela-gray-200);
  --border-strong:var(--vela-gray-300);
  --border-subtle:var(--vela-gray-100);
  --ring:         var(--vela-teal-400);

  --fg:           var(--vela-navy-900);
  --fg-muted:     var(--vela-gray-600);
  --fg-subtle:    var(--vela-gray-500);
  --fg-inverse:   var(--vela-sand-50);
  --fg-brand:     var(--vela-navy-700);
  --fg-accent:    var(--vela-teal-600);

  --brand:        var(--vela-navy-700);
  --brand-fg:     #FFFFFF;
  --brand-hover:  var(--vela-navy-800);
  --brand-muted:  var(--vela-navy-50);

  --accent:       var(--vela-teal-500);
  --accent-fg:    #FFFFFF;
  --accent-hover: var(--vela-teal-600);
  --accent-muted: var(--vela-teal-50);
  --accent-contrast: var(--vela-teal-700);

  --success:      var(--vela-success-500);
  --success-bg:   #E4F5EC;
  --success-border: var(--vela-success-300);
  --warn:         var(--vela-warn-500);
  --warn-bg:      #FDF2DE;
  --warn-border:  var(--vela-warn-300);
  --danger:       var(--vela-danger-500);
  --danger-bg:    #FBE8E6;
  --danger-border:var(--vela-danger-300);
  --info:         var(--vela-info-500);
  --info-bg:      #E6EFFB;
  --info-border:  var(--vela-info-300);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Display scale — serif, for headlines */
  --text-display-2xl: clamp(3.5rem, 7vw, 5.5rem);  /* 88 */
  --text-display-xl:  clamp(2.75rem, 5.5vw, 4rem); /* 64 */
  --text-display-lg:  clamp(2.25rem, 4.5vw, 3rem); /* 48 */
  --text-display-md:  clamp(1.75rem, 3.5vw, 2.25rem); /* 36 */
  --text-display-sm:  1.5rem;  /* 24 */

  /* Body scale — sans */
  --text-2xl: 1.5rem;    /* 24 */
  --text-xl:  1.25rem;   /* 20 */
  --text-lg:  1.125rem;  /* 18 */
  --text-md:  1rem;      /* 16 */
  --text-sm:  0.875rem;  /* 14 */
  --text-xs:  0.75rem;   /* 12 */
  --text-2xs: 0.6875rem; /* 11 */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-display: 500;

  /* ===== SPACING (4px base) ===== */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ===== RADIUS ===== */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ===== SHADOWS — navy-tinted, not black ===== */
  --shadow-xs: 0 1px 2px rgba(18, 27, 46, 0.06);
  --shadow-sm: 0 1px 2px rgba(18, 27, 46, 0.05), 0 2px 4px rgba(18, 27, 46, 0.04);
  --shadow-md: 0 2px 4px rgba(18, 27, 46, 0.06), 0 6px 12px rgba(18, 27, 46, 0.06);
  --shadow-lg: 0 4px 8px rgba(18, 27, 46, 0.06), 0 16px 32px rgba(18, 27, 46, 0.10);
  --shadow-xl: 0 8px 16px rgba(18, 27, 46, 0.08), 0 32px 64px rgba(18, 27, 46, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(18, 27, 46, 0.06);
  --shadow-ring: 0 0 0 3px rgba(64, 182, 189, 0.28);
  --shadow-glow: 0 0 0 1px rgba(64, 182, 189, 0.22), 0 8px 24px rgba(64, 182, 189, 0.25);

  /* ===== MOTION ===== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    380ms;
  --dur-slower:  600ms;

  /* ===== LAYOUT ===== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1360px;

  --header-h: 64px;
  --sidebar-w: 260px;

  /* ===== Z ===== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bg:           var(--vela-navy-950);
  --bg-subtle:    var(--vela-navy-900);
  --bg-muted:     var(--vela-navy-800);
  --surface:      var(--vela-navy-900);
  --surface-raised: var(--vela-navy-800);
  --surface-sunken: var(--vela-navy-950);
  --surface-inverse: var(--vela-sand-50);

  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.14);
  --border-subtle:rgba(255, 255, 255, 0.04);
  --ring:         var(--vela-teal-400);

  --fg:           var(--vela-sand-50);
  --fg-muted:     #A9B2C7;
  --fg-subtle:    #727B93;
  --fg-inverse:   var(--vela-navy-900);
  --fg-brand:     var(--vela-teal-300);
  --fg-accent:    var(--vela-teal-300);

  --brand:        var(--vela-teal-400);
  --brand-fg:     var(--vela-navy-950);
  --brand-hover:  var(--vela-teal-300);
  --brand-muted:  rgba(64, 182, 189, 0.12);

  --accent:       var(--vela-teal-400);
  --accent-fg:    var(--vela-navy-950);
  --accent-hover: var(--vela-teal-300);
  --accent-muted: rgba(64, 182, 189, 0.12);
  --accent-contrast: var(--vela-teal-200);

  --success-bg:   rgba(22, 163, 116, 0.14);
  --warn-bg:      rgba(232, 165, 58, 0.14);
  --danger-bg:    rgba(217, 74, 66, 0.14);
  --info-bg:      rgba(61, 125, 219, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.4), 0 32px 64px rgba(0, 0, 0, 0.6);
}

/* Auto dark if requested */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--vela-navy-950);
    --bg-subtle:    var(--vela-navy-900);
    --bg-muted:     var(--vela-navy-800);
    --surface:      var(--vela-navy-900);
    --surface-raised: var(--vela-navy-800);
    --surface-sunken: var(--vela-navy-950);
    --surface-inverse: var(--vela-sand-50);
    --border:       rgba(255, 255, 255, 0.08);
    --border-strong:rgba(255, 255, 255, 0.14);
    --border-subtle:rgba(255, 255, 255, 0.04);
    --fg:           var(--vela-sand-50);
    --fg-muted:     #A9B2C7;
    --fg-subtle:    #727B93;
    --fg-inverse:   var(--vela-navy-900);
    --fg-brand:     var(--vela-teal-300);
    --brand:        var(--vela-teal-400);
    --brand-fg:     var(--vela-navy-950);
    --brand-hover:  var(--vela-teal-300);
    --brand-muted:  rgba(64, 182, 189, 0.12);
    --accent:       var(--vela-teal-400);
    --accent-fg:    var(--vela-navy-950);
    --accent-hover: var(--vela-teal-300);
    --accent-muted: rgba(64, 182, 189, 0.12);
  }
}

/* ===== RESET / BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-display); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--vela-teal-400); color: var(--vela-navy-900); }

/* Font utility classes */
.font-display { font-family: var(--font-display); font-optical-sizing: auto; }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }
.italic { font-style: italic; }