/* =============================================================
   Bud Ecosystem — Design Tokens
   Colors · Typography · Spacing · Radii · Shadows
   v1.0 · March 2026
   Per official Brand Usage Guidelines
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face{
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root{
  /* ================ BRAND COLORS ================ */
  /* Primary violet scale — Bud owns "Electric Violet" territory */
  --bud-violet-deep:   #4C1D95;
  --bud-violet:        #6D28D9;
  --bud-electric:      #8C33EF;  /* hero / primary accent */
  --bud-electric-2:    #B785F4;
  --bud-electric-3:    #D9BAF9;

  /* Neutrals */
  --bud-midnight:      #120E1C;  /* page bg dark-mode (default) */
  --bud-void:          #0A0712;  /* alternate bg + motif background */
  --bud-deep:          #1E1A2B;  /* surface dark-mode */
  --bud-dusk:          #6B6080;  /* muted text */
  --bud-haze:          #C5BFD3;  /* body on dark */
  --bud-white:         #FFFFFF;
  --bud-black:         #000000;
  --bud-gray:          #727272;

  /* Signature template accent — the footer-bar gray-violet */
  --bud-footer-bar:    #8577AE;

  /* ================ COMPLEMENTARY ACCENTS ================ */
  /* A jewel-tone family tuned to sit beside Electric Violet at matched
     vividness. Use for data viz, categorical tags, diagrams, and product
     status accents — NOT as page or brand-primary colors. Electric Violet
     remains the hero; these support it. Each has a soft tint for fills. */
  --bud-red:           #F0476A;  --bud-red-soft:    rgba(240,71,106,0.16);
  --bud-orange:        #F2913C;  --bud-orange-soft: rgba(242,145,60,0.16);
  --bud-yellow:        #F2C341;  --bud-yellow-soft: rgba(242,195,65,0.16);
  --bud-green:         #35C88B;  --bud-green-soft:  rgba(53,200,139,0.16);
  --bud-blue:          #4F86F2;  --bud-blue-soft:   rgba(79,134,242,0.16);

  /* Semantic status (use sparingly — friction / cost / state indicators) */
  --bud-alert:         #FF6B6B;  /* X, danger, integration friction */
  --bud-amber:         #F5B400;  /* $, cost, caution */
  --bud-success:       #34D399;  /* confirmations */

  /* ================ SEMANTIC TOKENS (dark-mode first) ================ */
  --bg:              var(--bud-midnight);   /* default page background */
  --bg-alt:          var(--bud-void);       /* alternate / deepest bg */
  --motif-bg:        var(--bud-void);        /* background behind Grid & GOL motifs */
  --surface:         var(--bud-deep);
  --surface-elev:    #252134;
  --surface-overlay: rgba(30,26,43,0.85);

  --border:          rgba(183,133,244,0.15);
  --border-strong:   rgba(183,133,244,0.30);

  --fg1:             var(--bud-white);     /* primary text */
  --fg2:             var(--bud-haze);      /* body / secondary */
  --fg3:             var(--bud-dusk);      /* muted / caption */
  --fg-on-accent:    var(--bud-white);

  --accent:          var(--bud-electric);
  --accent-hover:    var(--bud-electric-2);
  --accent-pressed:  var(--bud-violet);
  --accent-muted:    rgba(140,51,239,0.14);

  --ring:            rgba(140,51,239,0.35);

  /* ================ TYPOGRAPHY ================ */
  --font-sans: 'Montserrat', 'Segoe UI', Arial, Calibri, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — per brand guidelines, stored in pt for print parity */
  --fs-display: 36pt;  /* @kind font */
  --fs-h1:      28pt;  /* @kind font */
  --fs-h2:      22pt;  /* @kind font */
  --fs-h3:      18pt;  /* @kind font */
  --fs-body:    16pt;  /* @kind font */
  --fs-body-sm: 14pt;  /* @kind font */
  --fs-caption: 12pt;  /* @kind font */

  /* Px equivalents for web (1pt ≈ 1.333px) */
  --fs-display-px: 48px;
  --fs-h1-px:      37px;
  --fs-h2-px:      29px;
  --fs-h3-px:      24px;
  --fs-body-px:    16px;
  --fs-body-sm-px: 14px;
  --fs-caption-px: 12px;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* Letter spacing */
  --tracking-tight: -0.02em;  /* @kind font */
  --tracking-snug:  -0.01em;  /* @kind font */
  --tracking-normal: 0;       /* @kind font */
  --tracking-wide:   0.08em;  /* @kind font */
  --tracking-eyebrow:0.18em;  /* @kind font */

  /* Line height */
  --lh-tight: 1.1;   /* @kind font */
  --lh-snug:  1.25;  /* @kind font */
  --lh-body:  1.55;  /* @kind font */

  /* ================ SPACING ================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ================ RADII ================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* buttons, inputs */
  --radius-lg: 12px;
  --radius-xl: 14px;   /* cards */
  --radius-2xl: 20px;  /* hero panels, modals */
  --radius-pill: 999px;

  /* ================ SHADOWS (dark-mode tuned) ================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 30px -8px rgba(0,0,0,0.55);     /* card elevation */
  --shadow-4: 0 30px 60px -20px rgba(0,0,0,0.6);      /* hero elevation */
  --shadow-glow: 0 0 0 1px rgba(140,51,239,0.35), 0 8px 32px rgba(140,51,239,0.25);

  /* ================ MOTION ================ */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --duration-xs: 80ms;   /* @kind other */
  --duration-sm: 120ms;  /* @kind other */
  --duration-md: 200ms;  /* @kind other */
  --duration-lg: 320ms;  /* @kind other */
  --duration-xl: 450ms;  /* @kind other */
}

/* ---------- Light-mode overrides (docs / enterprise print / light decks) ---------- */
[data-theme="light"]{
  --bg:              #FFFFFF;
  --surface:         #FAF7FE;
  --surface-elev:    #F3EDFB;
  --surface-overlay: rgba(255,255,255,0.92);

  --border:          rgba(76,29,149,0.15);
  --border-strong:   rgba(76,29,149,0.30);

  --fg1:             #0A0712;
  --fg2:             #3D3450;
  --fg3:             #6B6080;

  --accent:          var(--bud-violet);
  --accent-hover:    var(--bud-violet-deep);
  --accent-pressed:  #3B1379;
  --accent-muted:    rgba(109,40,217,0.10);

  --ring:            rgba(109,40,217,0.35);

  --shadow-1: 0 1px 2px rgba(76,29,149,0.06);
  --shadow-2: 0 4px 12px rgba(76,29,149,0.08);
  --shadow-3: 0 12px 30px -8px rgba(76,29,149,0.12);
  --shadow-4: 0 30px 60px -20px rgba(76,29,149,0.16);
}

/* ---------- Base ---------- */
html, body{
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body-px);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Semantic text styles ---------- */
.display, h1.display{
  font-size: var(--fs-display-px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5) 0;
  color: var(--fg1);
}
h1{
  font-size: var(--fs-h1-px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4) 0;
  color: var(--fg1);
}
h2{
  font-size: var(--fs-h2-px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4) 0;
  color: var(--fg1);
}
h3{
  font-size: var(--fs-h3-px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3) 0;
  color: var(--fg1);
}
p{
  font-size: var(--fs-body-px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg2);
  margin: 0 0 var(--space-4) 0;
}
small, .caption{
  font-size: var(--fs-caption-px);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--fg3);
}
code, pre, .mono{
  font-family: var(--font-mono);
  font-size: 0.92em;
}
strong{ font-weight: var(--fw-semibold); color: var(--fg1); }
em{ font-style: italic; }

a{
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-sm) var(--ease-out-expo);
}
a:hover{ color: var(--accent-hover); }

/* ---------- Utility ---------- */
.eyebrow{
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
  display: inline-block;
}

.accent-text{ color: var(--accent); }
.mute-text{ color: var(--fg3); }

/* Focus ring */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}