/* ============================================================
   PULSE DESIGN SYSTEM — TOKENS
   Synced from Figma variables (core + theme tiers)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TIER 1 — CORE TOKENS
     Source: Figma node 263:960
  ---------------------------------------------------------- */

  /* Blue scale */
  --blue-0:   #ffffff;
  --blue-2:   #f9f7f5;
  --blue-5:   #e3f1ff;
  --blue-10:  #c7e3ff;
  --blue-20:  #91c8ff;
  --blue-30:  #5cadff;
  --blue-40:  #1c8eff;
  --blue-50:  #0073e3;
  --blue-60:  #0060bf;
  --blue-70:  #004f9e;
  --blue-80:  #003c78;
  --blue-90:  #0b315e;
  --blue-95:  #1a1a1a;
  --blue-100: #000000;

  /* Rose scale */
  --rose-5:   #ffebf2;
  --rose-10:  #ffccdd;
  --rose-20:  #ffa6c4;
  --rose-40:  #ff6699;
  --rose-50:  #f23d79;

  /* Neutral (referenced by theme tokens, not in core scale) */
  --neutral-0:   #ffffff;
  --neutral-2:   #f9f7f5;  /* = background-footer */
  --neutral-5:   #f2efeb;  /* = background-container-variant */
  --neutral-20:  #dbd8d5;  /* = background-disabled */
  --neutral-40:  #ccc9c6;  /* = border-decorative */
  --neutral-60:  #767471;  /* = border-disabled */
  --neutral-70:  #5e5d5a;  /* = content-disabled, border-interactive, system-info */
  --neutral-95:  #1a1a1a;  /* = content-default, action-variant */
  --neutral-100: #000000;

  /* ----------------------------------------------------------
     TIER 2 — THEME / SEMANTIC TOKENS
     Source: Figma node 267:1240
     Named to match Figma: Action/, Border/, Content/, Background/, System/
  ---------------------------------------------------------- */

  /* Action */
  --action-default:        var(--blue-70);    /* #004f9e */
  --action-hover:          var(--blue-80);    /* #003c78 */
  --action-active:         var(--blue-50);    /* #0073e3 */
  --action-active-variant: var(--blue-10);    /* #c7e3ff */
  --action-variant:        var(--neutral-95); /* #1a1a1a */

  /* Content */
  --content-default:       var(--neutral-95); /* #1a1a1a */
  --content-disabled:      var(--neutral-70); /* #5e5d5a */
  --content-inverse:       var(--neutral-0);  /* #ffffff */
  --content-contrast:      var(--neutral-100);/* #000000 */

  /* Border */
  --border-interactive:    var(--neutral-70); /* #5e5d5a */
  --border-decorative:     var(--neutral-40); /* #ccc9c6 */
  --border-disabled:       var(--neutral-60); /* #767471 */
  --border-focus:          var(--neutral-100);/* #000000 */

  /* Background */
  --background-page:               var(--neutral-0);  /* #ffffff */
  --background-container:          var(--neutral-0);  /* #ffffff */
  --background-container-variant:  var(--neutral-5);  /* #f2efeb */
  --background-footer:             var(--neutral-2);  /* #f9f7f5 */
  --background-disabled:           var(--neutral-20); /* #dbd8d5 */

  /* Convenience aliases (used in component CSS) */
  --background-default:    var(--background-page);
  --background-subtle:     var(--background-container-variant);
  --content-primary:       var(--content-default);
  --content-secondary:     var(--content-disabled);
  --border-default:        var(--border-decorative);

  /* System (semantic) */
  --system-negative:       #db3321;
  --system-success:        #118738;
  --system-warning:        #e07800;
  --system-info:           var(--neutral-70); /* #5e5d5a — per Figma */

  /* Semantic background helpers (derived, not in Figma yet) */
  --background-negative:   #fde8e8;
  --background-success:    #e6f9f0;
  --background-warning:    #fff8e6;

  /* ----------------------------------------------------------
     BACKWARD-COMPAT ALIASES
     Maps old token names used in component CSS to new names
  ---------------------------------------------------------- */
  --color-neutral-0:   var(--neutral-0);
  --color-neutral-100: var(--neutral-5);
  --color-neutral-200: var(--neutral-20);
  --color-neutral-700: #3d3c3a;
  --color-neutral-800: var(--neutral-95);

  --color-error-50:    var(--background-negative);
  --color-error-500:   var(--system-negative);
  --color-error-600:   #a02518;

  --color-success-50:  var(--background-success);
  --color-success-600: #0d6b2c;

  --color-warning-50:  var(--background-warning);
  --color-warning-600: #b36000;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Font family: Helvetica (existing), with system fallbacks
  ---------------------------------------------------------- */
  --font-family-base: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;

  /* Scale */
  --text-xs:   12px;
  --text-sm:   14px;   /* = Link/S */
  --text-base: 16px;   /* = Paragraph/M, Link/M */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-fixed-sm: 24px;  /* = Paragraph/M line-height */

  /* Weights */
  --font-regular: 400;
  --font-bold:    700;

  /* Letter spacing */
  --tracking-tight: -0.01em;  /* = -0.16px at 16px */
  --tracking-normal: 0;

  /* Named type styles (matching Figma) */
  /* Display */
  --type-display-size:   var(--text-6xl);
  --type-display-weight: var(--font-bold);
  --type-display-leading: var(--leading-tight);

  /* Headings */
  --type-h1-size:   var(--text-5xl);
  --type-h2-size:   var(--text-4xl);
  --type-h3-size:   var(--text-3xl);
  --type-h4-size:   var(--text-2xl);
  --type-h5-size:   var(--text-xl);
  --type-h6-size:   var(--text-lg);

  /* Body */
  --type-body-l-size: var(--text-lg);
  --type-body-m-size: var(--text-base);   /* = Paragraph/M */
  --type-body-s-size: var(--text-sm);

  /* Utility */
  --type-caption-size: var(--text-xs);
  --type-label-size:   var(--text-sm);
  --type-code-size:    var(--text-sm);

  /* ----------------------------------------------------------
     SPACING
     Existing: xxs=4px, xs=8px, s=12px — extended
  ---------------------------------------------------------- */
  --space-1:  4px;   /* = theme-space-xxs */
  --space-2:  8px;   /* = theme-space-xs  */
  --space-3:  12px;  /* = theme-space-s   */
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
     BORDER RADIUS
     Existing: xl=24px
  ---------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-s:  4px;
  --radius-m:  8px;
  --radius-l:  12px;
  --radius-xl: 24px;  /* = shape/theme-corner-radius-xl */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS / ELEVATION
     Existing: Shadow/M = 0 4px 4px rgba(0,0,0,0.18)
  ---------------------------------------------------------- */
  --shadow-s:  0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-m:  0 4px 4px rgba(0, 0, 0, 0.18);  /* = Shadow/M */
  --shadow-l:  0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.22);

  /* ----------------------------------------------------------
     FOCUS RING (accessibility)
  ---------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--border-focus);

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ----------------------------------------------------------
     LAYOUT / GRID
  ---------------------------------------------------------- */
  --grid-columns-mobile:  4;
  --grid-columns-tablet:  8;
  --grid-columns-desktop: 12;
  --grid-gutter:  var(--space-4);
  --grid-margin:  var(--space-4);
  --container-max: 1320px;  /* matches nav-top width in Figma */

  /* Breakpoints (use in media queries) */
  /* --bp-sm:  640px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */
  /* --bp-2xl: 1440px */
}