/* ==========================================================================
   PEPTIDESTX — DESIGN TOKENS
   Source of truth: Phase 1 Brand Foundation / Phase 3 Hi-Fi Spec
   ========================================================================== */

:root {
  /* ---- Color: Neutrals ---- */
  --color-obsidian: #0B0D0F;
  --color-obsidian-elevated: #14171A;
  --color-white: #FFFFFF;
  --color-cloud-grey: #F5F5F6;

  /* ---- Color: Graphite scale ---- */
  --color-graphite-900: #1C1F22;
  --color-graphite-500: #6B7075;
  --color-graphite-300: #A8ACB0;
  --color-graphite-border-dark: #2A2D30;
  --color-graphite-border-light: #E4E5E7;
  --color-graphite-border-light-strong: #D8D9DB;

  /* ---- Color: Accent ---- */
  --color-royal-violet: #5B2A86;
  --color-royal-violet-hover: #4A2270;
  --color-royal-violet-rgb: 91, 42, 134;
  --color-deep-violet: #2E1547;
  --color-footer-heading: #9C8AAE;

  /* ---- Color: Functional ---- */
  --color-verified-green: #2E8B57;
  --color-verified-green-bg: #EAF5EF;
  --color-signal-red: #B3261E;
  --color-alert-amber: #C98A2C;

  /* ---- Type families ---- */
  --font-display: "Neue Montreal", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Spacing base unit: 8px scale ---- */
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-margin: 24px;
  --container-margin-mobile: 16px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Easing ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---- Motion durations ---- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-mid: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 500ms;

  /* ---- Header ---- */
  --header-height: 88px;
  --header-height-tablet: 72px;
  --header-height-mobile: 64px;
  --announcement-height: 36px;
  --announcement-height-mobile: 32px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-megamenu: 90;
  --z-dropdown: 150;
  --z-tooltip: 180;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-skip-link: 999;

  /* ---- Shadows (used only on hover/elevation states, never resting) ---- */
  --shadow-card: 0 8px 24px rgba(11, 13, 15, 0.08);
  --shadow-modal: 0 24px 64px rgba(11, 13, 15, 0.24);
  --shadow-dropdown: 0 12px 32px rgba(11, 13, 15, 0.12);
  --shadow-tooltip: 0 4px 16px rgba(11, 13, 15, 0.16);

  /* ---- Component-specific sizing ---- */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 56px;
}