/* ============================================
   MDx OS Design Tokens
   Core CSS custom properties. Loaded on every page.
   No component styles — tokens only.
   ============================================ */

/* === Font Face Declarations === */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === Design Tokens === */

:root {
  /* === Colors === */
  --color-bg:               #0A0A0B;
  --color-surface:          #141416;
  --color-surface-elevated: #1C1C1F;
  --color-border:           #2A2A2E;

  --color-primary:          #4285F4;
  --color-primary-hover:    #5B9BFF;
  --color-primary-muted:    rgba(66, 133, 244, 0.15);

  --color-success:          #34D399;
  --color-warning:          #FBBF24;
  --color-error:            #F87171;
  --color-info:             #60A5FA;

  --color-text-primary:     #F5F5F7;
  --color-text-secondary:   #A1A1AA;
  --color-text-tertiary:    #71717A;

  /* === Typography === */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-display:  32px;
  --text-h1:       24px;
  --text-h2:       20px;
  --text-h3:       16px;
  --text-body:     14px;
  --text-caption:  12px;
  --text-mono:     13px;

  --leading-display: 40px;
  --leading-h1:      32px;
  --leading-h2:      28px;
  --leading-h3:      24px;
  --leading-body:    22px;
  --leading-caption: 18px;
  --leading-mono:    20px;

  --tracking-display: -0.02em;
  --tracking-h1:      -0.01em;
  --tracking-h2:      -0.01em;

  /* === Spacing (4px base grid) === */
  --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;

  /* === Borders & Radii === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.3);

  /* === Motion === */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   200ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  /* === Z-Index Scale === */
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-modal:    30;
  --z-toast:    40;
  --z-tooltip:  50;
}