/* ==========================================================================
   Weesa Design Tokens — see DESIGN-SYSTEM.md
   ========================================================================== */

/* ---- Peyda (local, from Fonts/Peyda — FaNum web build) ---- */
@font-face { font-family: "Peyda"; font-weight: 100; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Thin.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Thin.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 200; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-ExtraLight.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-ExtraLight.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Light.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Light.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Regular.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Regular.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Medium.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Medium.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-SemiBold.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-SemiBold.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Bold.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Bold.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-ExtraBold.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-ExtraBold.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-Black.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-Black.woff") format("woff"); }
@font-face { font-family: "Peyda"; font-weight: 950; font-style: normal; font-display: swap; src: url("../fonts/peyda/PeydaFaNumWeb-ExtraBlack.woff2") format("woff2"), url("../fonts/peyda/PeydaFaNumWeb-ExtraBlack.woff") format("woff"); }

:root {
  /* ---- Brand & semantic colors (light) ---- */
  --color-primary: #2A4BE0;
  --color-primary-hover: #1F3BC0;
  --color-primary-soft: #EEF2FF;
  --color-primary-ring: rgba(42, 75, 224, .28);
  --color-accent: #5B47F0;
  --color-accent-soft: #F1EEFF;
  --color-teal: #0E9384;
  --color-teal-soft: #E6F6F4;

  --color-background: #F7F8FC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-sunken: #F0F2F8;

  --color-text: #0B1537;
  --color-text-secondary: #475069;
  --color-text-muted: #667085;
  --color-text-inverse: #FFFFFF;

  --color-border: #E3E7F1;
  --color-border-strong: #CDD3E3;

  --color-success: #087443;
  --color-success-soft: #E7F6EE;
  --color-warning: #B45309;
  --color-warning-soft: #FEF4E6;
  --color-error: #C8281E;
  --color-error-soft: #FDECEA;
  --color-info: #0B73C4;
  --color-info-soft: #E8F3FC;

  /* ---- Infra Night (dark storytelling sections) ---- */
  --night-bg: #060A1C;
  --night-surface: #0D1330;
  --night-surface-2: #141B3D;
  --night-border: rgba(255, 255, 255, .09);
  --night-border-strong: rgba(255, 255, 255, .16);
  --night-text: #E8ECF8;
  --night-text-muted: #9AA3C2;
  --night-primary: #8FA6FF;
  --night-accent: #B3A6FF;
  --night-teal: #5FD3C4;

  --gradient-brand: linear-gradient(120deg, #3157F6 0%, #5B47F0 60%, #8B6CFF 100%);
  --gradient-brand-text: linear-gradient(100deg, #2A4BE0 0%, #5B47F0 100%);
  --gradient-night-text: linear-gradient(100deg, #A9B9FF 0%, #C8BDFF 100%);

  /* ---- Typography ---- */
  --font-sans: "Peyda", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + .45vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-body-sm: .875rem;
  --fs-caption: .78125rem;
  --fs-overline: .8125rem;

  --lh-display: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.8;
  --lh-tight: 1.45;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --measure: 68ch;

  /* ---- Spacing (4px scale) ---- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-y: clamp(64px, 9vw, 128px);
  --gutter: clamp(16px, 4vw, 40px);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1400px;
  --container-text: 760px;
  --header-h: 72px;
  --sidebar-w: 264px;
  --topbar-h: 64px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 21, 55, .06);
  --shadow-sm: 0 1px 3px rgba(11, 21, 55, .08), 0 1px 2px rgba(11, 21, 55, .04);
  --shadow-md: 0 8px 24px -6px rgba(11, 21, 55, .12), 0 2px 6px rgba(11, 21, 55, .05);
  --shadow-lg: 0 24px 48px -12px rgba(11, 21, 55, .18);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);
  --glow-primary: 0 0 0 1px rgba(143, 166, 255, .35), 0 0 32px rgba(91, 71, 240, .25);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* ---- Icons ---- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}