/* ─────────────────────────────────────────────────────────────
   YachtWay Design System, Foundations
   Colors + Typography base variables.
   Sources: Figma "❖ Design System" (extracted 2026-04)
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Figtree:wght@400;500;600;700;900&family=Red+Hat+Display:wght@300;400;500;600;700&display=swap");

:root {
  /* ── Brand / Primary (purple) ───────────────────────────── */
  --brand-900: #2B0075;      /* rgb(43,0,117) , deepest */
  --brand-800: #4B0EA3;      /* rgb(75,14,163), pressed */
  --brand-700: #6430B0;      /* rgb(100,48,176), primary strip, nav accent */
  --brand-600: #7E52BE;      /* rgb(126,82,190), primary button */
  --brand-500: #7F56D9;      /* rgb(127,86,217), primary interactive */
  --brand-400: #8729FA;      /* rgb(135,41,250), vivid accent */
  --brand-100: #F4EEFF;
  --brand-50:  #FCFAFE;      /* rgb(252,250,254) */

  /* ── Neutrals / Gray (warm-cool mix used across fg/bg) ──── */
  --gray-1000: #000000;
  --gray-950:  #12121C;      /* rgb(18,18,22) */
  --gray-900:  #22222D;      /* rgb(34,34,45), primary text */
  --gray-800:  #2F2F39;      /* rgb(47,47,57) */
  --gray-700:  #3C3C46;      /* rgb(60,60,70) */
  --gray-600:  #575760;      /* rgb(87,87,96), supporting text */
  --gray-500:  #727279;      /* rgb(114,114,121) */
  --gray-400:  #A6A6AB;      /* rgb(166,166,171) */
  --gray-300:  #DCDCDE;      /* rgb(220,220,222), borders */
  --gray-200:  #F1F1F2;      /* rgb(241,241,242), divider */
  --gray-150:  #F6F6F7;      /* rgb(246,246,247), bg-secondary */
  --gray-100:  #F9FAFB;      /* rgb(249,250,251), bg-subtle */
  --gray-50:   #FAFAFA;
  --white:     #FFFFFF;

  /* Slate (the Red-Hat-Display "labels" grey used in older components) */
  --slate-500: #708090;      /* rgb(112,128,144) */

  /* ── Semantic status ─────────────────────────────────────── */
  --success-700: #103900;    /* rgb(16,57,0)  , deepest */
  --success-600: #185200;    /* rgb(24,82,0) */
  --success-500: #297B00;    /* rgb(41,123,0) */
  --success-400: #397B00;    /* rgb(57,123,0) */
  --success-100: #ECFDF3;
  --success-50:  #F6FEF9;
  --success-ink: #05603A;    /* rgb(5,96,58), text on success pill */

  --warning-700: #5C4800;
  --warning-500: #C8B100;    /* rgb(200,177,0) */
  --warning-100: #FFF8DB;

  --danger-700: #7A0000;
  --danger-600: #BB0000;     /* rgb(187,0,0) */
  --danger-500: #B42318;     /* rgb(180,35,24) */
  --danger-100: #FEF3F2;

  /* ── Alpha overlays ─────────────────────────────────────── */
  --black-a04: rgba(0,0,0,.04);
  --black-a05: rgba(0,0,0,.05);
  --black-a08: rgba(0,0,0,.08);
  --black-a12: rgba(0,0,0,.12);
  --black-a24: rgba(0,0,0,.24);
  --white-a10: rgba(255,255,255,.10);
  --white-a40: rgba(255,255,255,.40);
  --white-a80: rgba(255,255,255,.80);
  --slate-a04: rgba(112,128,144,.04);
  --slate-a08: rgba(132,144,163,.08);

  /* ── Semantic TOKENS (reference these in components) ────── */
  --bg:              var(--white);
  --bg-subtle:       var(--gray-100);
  --bg-muted:        var(--gray-150);
  --bg-inverse:      var(--gray-950);
  --bg-brand-subtle: var(--brand-50);

  --fg:              var(--gray-900);
  --fg-secondary:    var(--gray-700);
  --fg-tertiary:     var(--gray-600);
  --fg-muted:        var(--gray-500);
  --fg-disabled:     var(--gray-400);
  --fg-inverse:      var(--white);
  --fg-brand:        var(--brand-500);
  --fg-danger:       var(--danger-500);
  --fg-success:      var(--success-ink);
  --fg-warning:      var(--warning-500);

  --border:          var(--gray-300);
  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-900);
  --border-brand:    var(--brand-500);

  --link:            var(--brand-500);
  --link-hover:      var(--brand-800);

  /* ── Radius system ──────────────────────────────────────── */
  --radius-xxs: 2px;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;
  --radius-hero: 50px;   /* section wrappers in the Figma file */

  /* ── Spacing primitives (4pt base) ──────────────────────── */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 56px;
  --space-13: 64px;
  --space-14: 80px;
  --space-15: 96px;
  --space-16: 128px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(10,13,18,0.05);
  --shadow-sm:   0 1px 3px rgba(10,13,18,0.10), 0 1px 2px rgba(10,13,18,0.06);
  --shadow-md:   0 4px 6px -2px rgba(10,13,18,0.05), 0 12px 16px -4px rgba(10,13,18,0.10);
  --shadow-lg:   0 12px 24px -6px rgba(10,13,18,0.10), 0 4px 6px -2px rgba(10,13,18,0.05);
  --shadow-xl:   0 24px 48px -12px rgba(10,13,18,0.18);
  --shadow-card: 0 2px 4px rgba(132,144,163,0.08), 0 8px 16px rgba(132,144,163,0.08);
  --shadow-focus: 0 0 0 4px rgba(127,86,217,0.24);

  /* ── Typography, type families ─────────────────────────── */
  --font-display: "Poppins", "Red Hat Display", system-ui, sans-serif;
  --font-body:    "Figtree", "Red Hat Display", system-ui, sans-serif;
  --font-ui:      "Red Hat Display", "Figtree", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Typography, scales (desktop 1440) ─────────────────── */
  --tx-h3xl:   100px; --lh-h3xl:   140px;
  --tx-h2xl:   80px;  --lh-h2xl:   120px;
  --tx-hxl:    64px;  --lh-hxl:    96px;
  --tx-hlg:    48px;  --lh-hlg:    72px;
  --tx-hmd:    40px;  --lh-hmd:    60px;
  --tx-hsm:    32px;  --lh-hsm:    48px;
  --tx-hxs:    28px;  --lh-hxs:    40px;
  --tx-h2xs:   24px;  --lh-h2xs:   36px;
  --tx-lg:     20px;  --lh-lg:     28px;
  --tx-md:     18px;  --lh-md:     24px;
  --tx-sm:     16px;  --lh-sm:     24px;
  --tx-xs:     14px;  --lh-xs:     20px;
  --tx-2xs:    12px;  --lh-2xs:    18px;
}

/* ── Semantic element styles ─────────────────────────────── */
.ds-h1, h1.ds { font-family: var(--font-display); font-weight: 700;
  font-size: var(--tx-hlg); line-height: var(--lh-hlg); letter-spacing: -0.02em;
  color: var(--fg); }
.ds-h2, h2.ds { font-family: var(--font-display); font-weight: 700;
  font-size: var(--tx-hmd); line-height: var(--lh-hmd); letter-spacing: -0.01em;
  color: var(--fg); }
.ds-h3, h3.ds { font-family: var(--font-display); font-weight: 700;
  font-size: var(--tx-hsm); line-height: var(--lh-hsm); color: var(--fg); }
.ds-h4, h4.ds { font-family: var(--font-display); font-weight: 600;
  font-size: var(--tx-hxs); line-height: var(--lh-hxs); color: var(--fg); }
.ds-h5, h5.ds { font-family: var(--font-display); font-weight: 600;
  font-size: var(--tx-h2xs); line-height: var(--lh-h2xs); color: var(--fg); }
.ds-eyebrow   { font-family: var(--font-ui); font-weight: 500;
  font-size: 12px; line-height: 16px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-tertiary); }
.ds-body-lg   { font-family: var(--font-body); font-weight: 500;
  font-size: var(--tx-lg); line-height: var(--lh-lg); color: var(--fg-secondary); }
.ds-body      { font-family: var(--font-body); font-weight: 400;
  font-size: var(--tx-sm); line-height: var(--lh-sm); color: var(--fg-secondary); }
.ds-body-sm   { font-family: var(--font-body); font-weight: 400;
  font-size: var(--tx-xs); line-height: var(--lh-xs); color: var(--fg-tertiary); }
.ds-caption   { font-family: var(--font-ui); font-weight: 500;
  font-size: var(--tx-xs); line-height: var(--lh-xs); color: var(--fg-tertiary);
  letter-spacing: -0.01em; }
.ds-label     { font-family: var(--font-body); font-weight: 600;
  font-size: var(--tx-xs); line-height: var(--lh-xs); color: var(--fg); }
.ds-mono      { font-family: var(--font-mono); font-size: var(--tx-xs); }