/* ============================================================
   DESIGN SYSTEM — Color, Typography & Layout Tokens
   Source: newdesign.md (Miro-inspired Visual Intelligence Design System)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face { font-family:'Ubuntu Mono'; font-style:normal; font-weight:400; src:url('../fonts/UbuntuMono-R.ttf') format('truetype'); font-display:swap; }

:root {
  /* ================= 1. CORE PALETTE (Deep Blue & Navy System) ================= */
  --color-primary:               #0e3260; /* Deep Sapphire Navy primary */
  --color-primary-hover:         #17488a; /* Lighter royal navy on hover */
  --color-on-primary:            #ffffff; /* White text on primary */

  /* Signature Canary Yellow */
  --color-brand-yellow:          #ffd02f; /* Recognizable canary yellow wordmark & badges */
  --color-brand-yellow-deep:     #fcb900; /* Darker yellow for hover states */
  --color-yellow-light:          #fff4c4; /* Pale yellow background tint */
  --color-yellow-dark:           #746019; /* Yellow-tag text color */
  --color-surface-yellow:        #fff8e0; /* Pale yellow-tinted surface */

  /* Action & Brand Blue */
  --color-brand-blue:            #2563eb; /* Vibrant action blue for links and active borders */
  --color-blue-450:              #3b82f6; /* Lighter blue */
  --color-blue-pressed:          #1d4ed8; /* Pressed action blue */
  --color-blue-deep:             #0b2545; /* Deep ocean navy */
  --color-navy-dark:             #081a36; /* Midnight navy for dark chrome & footer */

  /* Pastel Feature Card Palette (Sticky note tints) */
  --color-brand-coral:           #ff9999;
  --color-coral-light:           #ffc6c6;
  --color-coral-dark:            #600000;
  --color-brand-rose:            #ffd8f4;
  --color-rose-light:            #fde0f0;
  --color-brand-pink:            #fde0f0;
  --color-brand-teal:            #0fbcb0;
  --color-teal-light:            #c3faf5;
  --color-moss-dark:             #187574;
  --color-brand-orange-light:    #ffe6cd;
  --color-brand-red:             #fbd4d4;
  --color-brand-red-dark:        #e3c5c5;
  --color-success-accent:        #00b473;

  /* Surfaces & Canvases */
  --color-canvas:                #ffffff; /* Stark white page background & primary card surface */
  --color-surface:               #f4f7fb; /* Subtle cool blue-tinted section backgrounds */
  --color-surface-soft:          #f8fafc; /* Quieter section divisions */
  --color-surface-pricing-featured: #eef2ff; /* Pale indigo/blue highlight */
  --color-hairline:              #dbe3ee; /* 1px cool borders & primary dividers */
  --color-hairline-soft:         #e9eff6; /* Table-row dividers */
  --color-hairline-strong:       #cbd5e1; /* Stronger 1px border for inputs */
  --color-footer-bg:             #081a36; /* Deep Midnight Navy footer background */

  /* Text & Inks (Deep Blue-Toned Inks) */
  --color-ink-deep:              #06152d; /* Deepest midnight navy headlines */
  --color-ink:                   #0c2340; /* Primary rich navy headlines and text */
  --color-charcoal:              #1e3a5f; /* Body emphasis & deep slate-blue */
  --color-slate:                 #475569; /* Secondary text & metadata */
  --color-steel:                 #64748b; /* Tertiary text & footer links */
  --color-stone:                 #889bb0; /* Captions & muted labels */
  --color-muted:                 #94a3b8; /* Disabled labels & input placeholders */
  --color-on-dark:               #ffffff; /* White text on dark surfaces */
  --color-on-dark-muted:         #cbd5e1; /* Reduced-opacity white on dark */

  /* Compatibility mappings */
  --color-gold:                  var(--color-brand-yellow);
  --color-body:                  var(--color-charcoal);
  --color-body-mid:              var(--color-slate);
  --color-mute:                  var(--color-stone);
  --color-canvas-soft:           var(--color-surface);
  --color-ink-soft:              var(--color-surface);
  --color-ink-mid:               var(--color-steel);

  /* ================= 2. SEMANTIC MAPPINGS ================= */
  --bg-page:                     var(--color-canvas);
  --bg-surface:                  var(--color-canvas);
  --bg-surface-soft:             var(--color-surface);
  --bg-muted:                    var(--color-surface);
  --bg-inverse:                  var(--color-primary);

  --fg-default:                  var(--color-body);
  --fg-strong:                   var(--color-ink);
  --fg-muted:                    var(--color-body-mid);
  --fg-mute:                     var(--color-mute);
  --fg-on-dark:                  var(--color-on-dark);
  --fg-on-accent:                var(--color-on-primary);

  --accent-primary:              var(--color-primary);
  --accent-primary-hover:        var(--color-primary-hover);
  --accent-secondary:            var(--color-brand-yellow);
  --accent-secondary-hover:      var(--color-brand-yellow-deep);

  --info:                        var(--color-brand-blue);
  --success:                     var(--color-success-accent);
  --warning:                     var(--color-yellow-dark);
  --danger:                      #d93025;

  --border-default:              var(--color-hairline);
  --border-soft:                 var(--color-hairline-soft);
  --border-strong:               var(--color-hairline-strong);
  --border-accent:               var(--color-brand-yellow);

  --focus-ring:                  0 0 0 3px rgba(37, 99, 235, 0.25);

  /* Legacy / Stratix compatibility aliases mapped to new palette */
  --stratix-blue:                var(--color-brand-blue);
  --stratix-green:               var(--color-brand-teal);
  --stratix-slate:               var(--color-charcoal);
  --stratix-orange:              #e65100;
  --stratix-yellow:              var(--color-brand-yellow);
  --stratix-cool-gray-2:         var(--color-hairline-soft);
  --stratix-cool-gray-6:         var(--color-stone);
  --stratix-black:               var(--color-primary);
  --stratix-white:               var(--color-canvas);
  --stratix-blue-05:             var(--color-surface-pricing-featured);
  --stratix-blue-10:             #e0e7ff;
  --stratix-blue-20:             #c7d2fe;
  --stratix-blue-60:             #1d4ed8;
  --stratix-blue-80:             #0e3260;
  --stratix-green-05:            var(--color-teal-light);
  --stratix-green-10:            #a7f3d0;
  --stratix-green-60:            var(--color-moss-dark);
  --stratix-green-80:            #064e3b;
  --stratix-slate-05:            var(--color-surface);
  --stratix-slate-10:            var(--color-hairline-soft);
  --stratix-slate-40:            var(--color-stone);
  --stratix-slate-80:            var(--color-primary);
  --stratix-gradient:            var(--color-primary);
  --stratix-gradient-soft:       var(--color-surface);

  --chart-1: #2563eb;
  --chart-2: #ffd02f;
  --chart-3: #0fbcb0;
  --chart-4: #ff9999;
  --chart-5: #0e3260;
  --chart-6: #64748b;

  /* ================= 3. ROUNDED SCALE (newdesign.md) ================= */
  --rounded-none: 0px;
  --rounded-xs:   4px;
  --rounded-sm:   6px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-xxl:  20px;
  --rounded-xxxl: 28px;
  --rounded-feature: 32px;
  --rounded-pill: 9999px;
  --rounded-full: 9999px;

  /* Aliases */
  --radius-none: var(--rounded-none);
  --radius-sm:   var(--rounded-sm);
  --radius-md:   var(--rounded-md);
  --radius-lg:   var(--rounded-lg);
  --radius-xl:   var(--rounded-xl);
  --radius-pill: var(--rounded-full);

  /* ================= 4. SPACING SYSTEM (newdesign.md) ================= */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;
  --space-hero: 120px;

  /* Numbered space aliases for layout templates */
  --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;
  --space-24: 96px;

  --accent-bar-height: 4px;

  /* ================= 5. SHADOWS & ELEVATION (newdesign.md) ================= */
  --shadow-xs: 0 1px 2px rgba(5, 0, 56, 0.04);
  --shadow-sm: 0 1px 3px rgba(5, 0, 56, 0.04), 0 1px 2px rgba(5, 0, 56, 0.02);
  --shadow-md: 0 4px 12px rgba(5, 0, 56, 0.06);
  --shadow-lg: 0 12px 32px -4px rgba(5, 0, 56, 0.08);
  --shadow-modal: 0 16px 48px -8px rgba(5, 0, 56, 0.12);

  /* ================= 6. TYPOGRAPHY (newdesign.md) ================= */
  --font-display: 'Roobert PRO', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:    'Roobert PRO', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* newdesign.md Type Tokens */
  --fs-hero-display:   80px;
  --lh-hero-display:   1.05;
  --ls-hero-display:   -2px;

  --fs-display-lg:     60px;
  --lh-display-lg:     1.10;
  --ls-display-lg:     -1.5px;

  --fs-heading-1:      48px;
  --lh-heading-1:      1.15;
  --ls-heading-1:      -1px;

  --fs-heading-2:      36px;
  --lh-heading-2:      1.20;
  --ls-heading-2:      -0.5px;

  --fs-heading-3:      28px;
  --lh-heading-3:      1.25;

  --fs-heading-4:      22px;
  --lh-heading-4:      1.30;

  --fs-heading-5:      18px;
  --lh-heading-5:      1.40;

  --fs-subtitle:       18px;
  --lh-subtitle:       1.50;

  --fs-body-md:        16px;
  --lh-body-md:        1.50;

  --fs-body-sm:        14px;
  --lh-body-sm:        1.50;

  --fs-caption:        13px;
  --lh-caption:        1.40;

  --fs-micro:          12px;
  --lh-micro:          1.40;

  --fs-button-md:      14px;
  --lh-button-md:      1.30;

  --fs-stat-display:   64px;
  --lh-stat-display:   1.10;
  --ls-stat-display:   -1.5px;

  /* Semantic heading aliases */
  --fs-display-xl:     var(--fs-hero-display);
  --fs-display-md:     var(--fs-heading-2);
  --fs-display-sub-sm: var(--fs-heading-3);
  --fs-display-xs:     var(--fs-heading-4);
  --fs-eyebrow:        12px;
  --lh-eyebrow:        1.40;
  --ls-eyebrow:        1px;

  --fs-display:        var(--fs-hero-display);
  --fs-h1:             var(--fs-heading-1);
  --fs-h2:             var(--fs-heading-2);
  --fs-h3:             var(--fs-heading-3);
  --fs-h4:             var(--fs-heading-4);
  --fs-subhead:        var(--fs-subtitle);
  --fs-body:           var(--fs-body-sm);
  --fs-sm:             var(--fs-caption);
  --fs-xs:             var(--fs-micro);

  --lh-tight:          1.15;
  --lh-snug:           1.30;
  --lh-normal:         1.50;
  --lh-relaxed:        1.60;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.5px;
}

/* ================= BASE ELEMENT STYLES ================= */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-1);
  letter-spacing: var(--ls-heading-1);
  color: var(--color-ink-deep);
  margin: 0 0 var(--space-xs);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-2);
  letter-spacing: var(--ls-heading-2);
  color: var(--color-ink-deep);
  margin: 0 0 var(--space-xs);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-3);
  color: var(--color-ink-deep);
  margin: 0 0 var(--space-xs);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-4);
  color: var(--color-ink);
  margin: 0 0 var(--space-xxs);
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-5);
  color: var(--color-ink);
  margin: 0 0 var(--space-xxs);
}

.subhead {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-subtitle);
  color: var(--color-slate);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

small, .small {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-steel);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--color-steel);
  line-height: var(--lh-caption);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-steel);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--color-brand-blue);
  text-decoration: none;
  transition: color 150ms ease, opacity 150ms ease;
}
a:hover {
  color: var(--color-blue-pressed);
  text-decoration: underline;
}

::selection {
  background: var(--color-brand-yellow);
  color: var(--color-primary);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}