/* ==========================================================================
   DeltaXY — Design tokens
   Single source of truth for colour, type, spacing, radii, motion.
   No selectors other than :root / theme scopes belong in this file.
   ========================================================================== */

:root {
  /* ---- Brand ramp -------------------------------------------------------
     Accent is a rich, saturated royal blue. The ramp is derived from it so
     hover / tint / ring states stay in family instead of being one-off hex
     values. */
  --brand-100: #DCE3FF;
  --brand-200: #B7C4FF;
  --brand-300: #8C9FFF;
  --brand-400: #5A72FF;
  --brand-500: #2D42F6; /* ← the accent */
  --brand-600: #2130DA;
  --brand-700: #1922AC;
  --brand-800: #131A82;
  --brand-900: #0E1459;

  /* ---- Neutral ramp ---- */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFB;
  --n-50:  #F7F7F6;
  --n-100: #F0F0EE;
  --n-200: #E4E4E1;
  --n-300: #CFCFCB;
  --n-400: #A3A19E;
  --n-500: #7C7A77;
  --n-600: #5C5A58;
  --n-700: #3D3C3A;
  --n-800: #272727;
  --n-850: #1F1F1F;
  --n-900: #161616;
  --n-950: #101010;
  --n-1000:#0A0A0A;

  /* ---- Type families ----
     Inter Tight for display, Inter for UI/body, JetBrains Mono for the
     uppercase eyebrow labels and data readouts. */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, "Liberation Mono", monospace;

  /* ---- Type scale ---- */
  --fs-display-1: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --fs-display-2: clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem);
  --fs-display-3: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h4:        1.1875rem;
  --fs-h5:        1.0625rem;
  --fs-lead:      clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --fs-body:      0.9375rem;   /* 15px */
  --fs-sm:        0.875rem;    /* 14px */
  --fs-xs:        0.8125rem;   /* 13px */
  --fs-label:     0.6875rem;   /* 11px — mono eyebrows */

  --lh-display: 0.99;
  --lh-tight:   1.2;
  --lh-body:    1.65;

  --ls-display: -0.028em;
  --ls-tight:   -0.015em;
  --ls-label:   0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --measure:   68ch;
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --header-h:  64px;

  /* ---- Radii ---- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  520ms;

  --z-header: 100;
  --z-menu:   200;
}

/* ==========================================================================
   Theme
   Dark only — there is no toggle and no light scope.
   ========================================================================== */
:root {
  color-scheme: dark;

  --bg:            #0D0D0D;
  --bg-elevated:   #121212;
  --surface:       #161616;
  --surface-2:     #1C1C1C;
  --surface-hover: #202020;

  --display:  #EDEAE8;
  --text:     #C9C5C2;
  --muted:    #8E8A87;
  --faint:    #6A6764;

  --border:        #272727;
  --border-subtle: #1E1E1E;
  --border-strong: #383838;
  --hairline:      rgba(255, 255, 255, 0.07);

  --accent:       var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-text:  var(--brand-300);
  --accent-tint:  rgba(45, 66, 246, 0.16);
  --accent-ring:  rgba(45, 66, 246, 0.5);
  --accent-glow:  rgba(45, 66, 246, 0.26);
  --on-accent:    #FFFFFF;

  --grid-dot:  rgba(255, 255, 255, 0.06);
  --grid-line: rgba(255, 255, 255, 0.085);
  --marker:    #3A3A3A;

  --footer-bg: #080808;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  --selection-bg:   rgba(45, 66, 246, 0.32);
  --selection-text: #EAEFFF;
}