/* Tokens: --pulse-* from pulse-palette-api.js */

@font-face {
  font-family: Montserrat;
  src: url('/fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root {
  /* typography */
  --font-main: Montserrat, ui-sans-serif, system-ui, sans-serif;
  --font-wordmark: var(--font-main);
  /* legacy: same as --font-main (no second UI font) */
  --font-mono: var(--font-main);

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;

  --tracking-tight: 0.02em;
  --tracking-wide:  0.08em;
  --tracking-ultra: 0.14em;

  --leading-tight: 1.25;
  --leading-body:  1.5;

  /* Captions: field labels + table headers (same as .pulse-data-table th) */
  --pulse-field-label-font:        var(--font-main);
  --pulse-field-label-size:        10px;
  --pulse-field-label-weight:      600;
  --pulse-field-label-tracking:    0.06em;
  --pulse-field-label-color:       var(--primary);
  --pulse-field-label-line-height: 1.25;
  --pulse-field-label-border:      1px solid rgba(255, 255, 255, 0.08);

  /*
   * Layout spacing (dashboard + web chrome): mirror pulse-app `AppStyles.padding` / section rhythm.
   * See: `pulse-app/lib/src/core/crew/app_styles.dart` (`padding`), `.../account/stage/section_card.dart` (`_withDividers`).
   * --layout-pad ≈ horizontal inset per section child; vertical half-inset uses calc(var(--layout-pad) / 2) in dashboard CSS.
   */
  --layout-gap: 16px;
  --layout-pad: 15px;

  --padding: var(--layout-pad);
  --margin:  var(--layout-pad);

  --density-gap: var(--layout-gap);
  --density-pad: var(--layout-pad);
  --density-card: calc(var(--layout-pad) + var(--layout-gap) * 0.35);

  /* radii — small scale for dense UI; capsule/plaque chain mirrors pulse_electron Pulse_Theme.css */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* Outer capsule (electron --border-radius: 50px) → inset + plaque for tracks / knobs */
  --radius-capsule-outer: 50px;
  --control-border: 3px;
  --radius-inset: calc(var(--radius-capsule-outer) - (10px - var(--control-border)));
  --radius-plaque: calc(var(--radius-capsule-outer) / 2 - var(--control-border));

  --border-width: 2px;
  --border-hair:  1px;

  /* motion (electron names this --bouncy-bezier) */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-pulse: cubic-bezier(0.15, 1.35, 0.64, 1);
  --bouncy-bezier: var(--ease-pulse);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 400ms;
  --t-pulse: 300ms;
  --t-pulse-fast: 150ms;

  /* controls (electron: option-button / config use same border width as --control-border) */
  --control-height:  36px;
  --control-radius:  var(--radius-plaque);
  --control-knob:    calc(var(--control-height) - (var(--control-border) * 2));
  --control-track-h: 12px;
  --control-field-pad: 10px 14px;
  --control-font-size: var(--fs-sm);
  /* Slider track + thumb corner radius (electron config_slider --slider-border-radius) */
  --control-slider-radius: calc(var(--radius-plaque) + var(--control-border));

  /* z-index */
  --z-base:     1;
  --z-nav:    100;
  --z-dropdown: 500;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
  --z-tooltip: 1300;

  /* shadows + blur — full filter strings like pulse_electron Pulse_Theme.css */
  --blur-bg:     blur(6px);
  --blur-modal:  blur(32px);
  --blur-overlay: blur(4px);
  --blur-chrome: blur(10px);
  --background-blur: var(--blur-bg);
  --modal-blur:      var(--blur-modal);

  --shadow-soft: 4px 6px 14px hsla(0, 0%, 0%, 0.30);
  --shadow-hard: 8px 8px 24px hsla(0, 0%, 0%, 0.15);
  --shadow-card: 8px 8px 28px hsla(0, 0%, 0%, 0.45);
  --shadow-pop:  0 10px 32px hsla(0, 0%, 0%, 0.30);
  /* electron --box-shadow: 0 0 6px primary */
  --shadow-primary-glow: 0 0 6px color-mix(in srgb, var(--primary) 70%, transparent);

  /* surfaces + text + accents */
  --bg:           var(--pulse-deep-grey);
  --surface-1:    color-mix(in srgb, var(--pulse-deep-grey) 96%, white);
  --surface-2:    color-mix(in srgb, var(--pulse-deep-grey) 92%, white);
  --surface-3:    color-mix(in srgb, var(--pulse-deep-grey) 86%, white);

  --text:         var(--pulse-pale-grey);
  --text-muted:   var(--pulse-grey);
  --text-faint:   color-mix(in srgb, var(--pulse-grey) 55%, var(--pulse-deep-grey));

  --light:        hsla(0, 0%, 100%, 0.06);
  --light-strong: hsla(0, 0%, 100%, 0.10);
  --line:         var(--light);
  --border:       hsla(0, 0%, 100%, 0.05);
  --border-soft:  hsla(0, 0%, 100%, 0.03);

  --primary:           var(--pulse-blue);
  --primary-soft:      color-mix(in srgb, var(--pulse-blue) 12%, transparent);
  --primary-very-faint:color-mix(in srgb, var(--pulse-blue) 4%,  transparent);
  --primary-deep:      var(--pulse-deep-blue);
  --primary-pale:      var(--pulse-pale-blue);

  --accent-tech:       var(--pulse-deep-purple);
  --accent-tech-soft:  var(--pulse-purple);
  --accent-tech-very-faint: color-mix(in srgb, var(--pulse-deep-purple) 3.5%, transparent);

  --success:      var(--pulse-deep-green);
  --warning:      var(--pulse-deep-yellow);
  --danger:       var(--pulse-deep-red);
  --info:         var(--primary);

  --glow-primary:        0 0 20px color-mix(in srgb, var(--pulse-blue) 20%, transparent);
  --glow-primary-strong: 0 0 8px  color-mix(in srgb, var(--pulse-blue) 40%, transparent);
  --glow-accent:         0 0 20px color-mix(in srgb, var(--pulse-deep-purple) 20%, transparent);

  --overlay-dark:   hsla(0, 0%, 0%, 0.60);
  --overlay-light:  hsla(0, 0%, 100%, 0.06);
  --overlay-medium: hsla(0, 0%, 100%, 0.08);
  --overlay-strong: hsla(0, 0%, 100%, 0.14);

  --scrollbar-thumb:        hsla(0, 0%, 100%, 0.08);
  --scrollbar-thumb-hover:  hsla(0, 0%, 100%, 0.14);

  --backdrop-surface: color-mix(in srgb, var(--pulse-deep-grey) 85%, transparent);

  --shadow-sidebar: 10px 0 40px hsla(0, 0%, 0%, 0.50);
}

/* density */
html[data-density="compact"] {
  --layout-gap: 12px;
  --layout-pad: 12px;
}
html[data-density="spacious"] {
  --layout-gap: 20px;
  --layout-pad: 28px;
}