/* ============================================================
   Volta Design Tokens
   ------------------------------------------------------------
   The single source of truth for colors, type, spacing,
   radii, shadows, and motion.

   Imported by every preview/ card and every ui_kit/.
   ============================================================ */

/* -- Fonts ---------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ===== Color: Voltgreen (primary) ===== */
  --voltgreen-50:  #EBF7EE;
  --voltgreen-100: #D2EDDA;
  --voltgreen-200: #A7DCB6;
  --voltgreen-300: #6FC78A;
  --voltgreen-400: #46B66B;
  --voltgreen-500: #2FA84F;   /* brand primary */
  --voltgreen-600: #258A41;
  --voltgreen-700: #1F6E37;
  --voltgreen-800: #154C26;
  --voltgreen-900: #0E1F12;   /* forest, near-black */

  /* ===== Color: Mint (secondary, tints) ===== */
  --mint-50:  #F4FAF6;
  --mint-100: #E6F5EB;
  --mint-200: #D2ECD9;

  /* ===== Color: Bolt yellow (accent — used sparingly) ===== */
  --bolt-yellow:       #FFE60A;
  --bolt-yellow-soft:  #FFF5A3;
  --bolt-yellow-deep:  #E2C700;

  /* ===== Color: Cream (warm alt background) ===== */
  --cream-50:  #FAF8EE;
  --cream-100: #F4F0DE;

  /* ===== Color: Circuit grey (neutrals) ===== */
  --grey-50:  #F6F7F5;
  --grey-100: #ECEEEA;
  --grey-200: #D9DED7;   /* hairlines, borders */
  --grey-300: #BFC6BC;
  --grey-400: #A4ADA0;
  --grey-500: #88958D;   /* secondary text */
  --grey-600: #6B786F;
  --grey-700: #4C5751;
  --grey-800: #2F3833;
  --grey-900: #15171A;   /* body text on light */

  /* ===== Color: Semantic ===== */
  --signal-red:    #D9483F;
  --signal-red-bg: #FBE9E8;
  --signal-amber:  #E2A100;

  /* ===== Surface roles ===== */
  --bg-page:        var(--mint-50);
  --bg-page-warm:   var(--cream-50);
  --bg-card:        #FFFFFF;
  --bg-card-hover:  var(--mint-100);
  --bg-inverse:     var(--voltgreen-900);

  /* ===== Text roles ===== */
  --fg-1:           var(--grey-900);     /* primary body */
  --fg-2:           var(--grey-700);     /* secondary */
  --fg-3:           var(--grey-500);     /* tertiary, captions */
  --fg-on-dark:     var(--mint-50);
  --fg-on-dark-2:   var(--voltgreen-200);
  --fg-brand:       var(--voltgreen-500);
  --fg-brand-deep:  var(--voltgreen-700);
  --fg-accent:      var(--bolt-yellow-deep);

  /* ===== Border roles ===== */
  --border-1:       var(--grey-200);     /* default hairline */
  --border-2:       var(--grey-300);     /* heavier */
  --border-brand:   var(--voltgreen-500);
  --border-focus:   var(--bolt-yellow);

  /* ===== Type: families ===== */
  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* ===== Type: scale (px / line-height / tracking) ===== */
  --t-display-xl: 60px;   --t-display-xl-lh: 64px;
  --t-display-lg: 48px;   --t-display-lg-lh: 52px;
  --t-h1:         38px;   --t-h1-lh:         44px;
  --t-h2:         30px;   --t-h2-lh:         36px;
  --t-h3:         24px;   --t-h3-lh:         30px;
  --t-body-lg:    18px;   --t-body-lg-lh:    28px;
  --t-body:       16px;   --t-body-lh:       26px;
  --t-body-sm:    14px;   --t-body-sm-lh:    22px;
  --t-caption:    12px;   --t-caption-lh:    16px;
  --t-mono-sm:    13px;   --t-mono-sm-lh:    20px;

  /* ===== Spacing (4px base) ===== */
  --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;
  --space-10: 128px;

  /* ===== Radii ===== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ===== Shadows (used very sparingly) ===== */
  --shadow-menu: 0 4px 24px -8px rgba(14, 31, 18, 0.18);
  --shadow-modal: 0 24px 48px -16px rgba(14, 31, 18, 0.28);

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 0.6, 1);
  --dur-hover:   120ms;
  --dur-state:   200ms;
  --dur-enter:   320ms;
  --dur-page:    480ms;

  /* ===== Layout ===== */
  --max-marketing: 1200px;
  --max-app:       1080px;
  --gutter-mobile:  24px;
  --gutter-tablet:  48px;
  --gutter-desktop: 80px;
  --nav-height:     64px;
  --sidebar-width:  240px;
}

/* ============================================================
   Semantic type classes — use these in markup.
   ============================================================ */

.t-display-xl,
.t-display-lg,
.t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-display-xl { font-size: var(--t-display-xl); line-height: var(--t-display-xl-lh); letter-spacing: -0.02em; font-weight: 700; }
.t-display-lg { font-size: var(--t-display-lg); line-height: var(--t-display-lg-lh); letter-spacing: -0.02em; font-weight: 700; }
.t-h1         { font-size: var(--t-h1);         line-height: var(--t-h1-lh); }
.t-h2         { font-size: var(--t-h2);         line-height: var(--t-h2-lh); }
.t-h3         { font-size: var(--t-h3);         line-height: var(--t-h3-lh); }

.t-body-lg,
.t-body,
.t-body-sm,
.t-caption {
  font-family: var(--font-body);
  color: var(--fg-1);
  font-weight: 400;
}

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); }
.t-body    { font-size: var(--t-body);    line-height: var(--t-body-lh); }
.t-body-sm { font-size: var(--t-body-sm); line-height: var(--t-body-sm-lh); color: var(--fg-2); }
.t-caption {
  font-size: var(--t-caption);
  line-height: var(--t-caption-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

.t-mono,
.t-mono-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--fg-2);
}
.t-mono-sm { font-size: var(--t-mono-sm); line-height: var(--t-mono-sm-lh); }
.t-mono    { font-size: var(--t-body-sm); line-height: var(--t-body-sm-lh); }

/* ============================================================
   Base resets used inside cards / kits.
   ============================================================ */

.vlf-base {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}