/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   Breakpoints (for reference — CSS variables can't be used in media queries):
     sm 480px · md 768px · lg 1024px · xl 1280px
   ========================================================================== */

/* ---- Self-hosted fonts (no requests to Google; see assets/fonts/LICENSE.txt) */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/geist-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/geist-mono-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Brand palette -------------------------------------------------- */
  --blue-25:  #F7F9FF;
  --blue-50:  #EFF3FF;
  --blue-100: #E1E8FF;
  --blue-200: #C4D2FF;
  --blue-300: #93AAFF;
  --blue-400: #5C7FFF;
  --blue-500: #2A56FF;
  --blue-600: #0A3DFF;   /* primary */
  --blue-700: #0731CC;
  --blue-800: #0B2E6D;
  --navy-900: #071B3D;
  --navy-950: #041229;

  --orange-50:  #FFF4EC;
  --orange-100: #FFE3CE;
  --orange-500: #FF6B00; /* accent — use sparingly */
  --orange-600: #E55F00;

  --green-500: #12B76A;  /* status only */

  /* ---- Cool neutrals --------------------------------------------------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FBFBFD;
  --gray-50:  #F5F6F9;
  --gray-100: #EEF0F4;
  --gray-200: #E3E6EC;
  --gray-300: #CFD4DD;
  --gray-400: #A0A7B5;
  --gray-500: #6A7284;
  --gray-600: #4E5667;
  --gray-700: #353C4B;
  --gray-800: #1D2330;
  --gray-900: #0B1120;

  /* ---- Semantic colours ------------------------------------------------ */
  --color-bg: var(--gray-25);
  --color-surface: var(--gray-0);
  --color-surface-muted: var(--gray-50);
  --color-surface-sunken: var(--gray-100);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: #FFFFFF;
  --color-border: rgba(11, 17, 32, 0.08);
  --color-border-strong: rgba(11, 17, 32, 0.14);
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-500);
  --color-primary-active: var(--blue-700);
  --color-primary-soft: var(--blue-50);
  --color-accent: var(--orange-500);
  --color-accent-soft: var(--orange-50);
  --color-dark: var(--navy-900);
  --color-dark-deep: var(--navy-950);
  --color-success: var(--green-500);
  --color-danger: #D92D20;
  --color-focus: rgba(10, 61, 255, 0.35);
  --grid-line: rgba(11, 17, 32, 0.045);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:  1.0625rem;  /* 17 */
  --text-lg:  clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:  clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.05vw, 2rem);
  --text-3xl: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --text-4xl: clamp(2.375rem, 1.6rem + 3.3vw, 4.25rem);
  --text-display: clamp(2.625rem, 1.55rem + 4.6vw, 5.25rem);

  --leading-tight: 1.04;
  --leading-snug: 1.15;
  --leading-normal: 1.45;
  --leading-relaxed: 1.62;

  --tracking-display: -0.045em;
  --tracking-heading: -0.032em;
  --tracking-title: -0.018em;
  --tracking-body: -0.006em;
  --tracking-label: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --measure: 38rem;       /* max paragraph width */
  --measure-narrow: 30rem;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(5rem, 3.2rem + 7vw, 9.5rem);
  --section-y-sm: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 75rem;       /* 1200 */
  --container-wide: 82rem;  /* 1312 */
  --container-narrow: 50rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 4.25rem;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (very soft, layered) ----------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 17, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 17, 32, 0.04), 0 2px 6px rgba(11, 17, 32, 0.04);
  --shadow-md: 0 1px 2px rgba(11, 17, 32, 0.04), 0 10px 24px -8px rgba(11, 17, 32, 0.10);
  --shadow-lg: 0 2px 4px rgba(11, 17, 32, 0.03), 0 24px 48px -16px rgba(11, 17, 32, 0.16);
  --shadow-xl: 0 2px 6px rgba(11, 17, 32, 0.04), 0 40px 80px -24px rgba(11, 17, 32, 0.22);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(10, 61, 255, 0.3), 0 8px 20px -8px rgba(10, 61, 255, 0.55);
  --ring: 0 0 0 4px var(--color-focus);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 1000ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 100;
  --z-menu: 110;
  --z-chat: 120;
}