/* ==========================================================================
   variables.css — design tokens
   Dark Frutiger Aero: abyss gradients, aqua/lime bloom, frosted glass, gloss.
   Every value the other stylesheets consume is declared here.
   ========================================================================== */

:root {
  /* --- Palette: abyss ---------------------------------------------------
     Page runs near-black at the top into a deep teal at the bottom. */
  --color-abyss-900: #03070a;
  --color-abyss-800: #050d13;
  --color-abyss-700: #07161f;
  --color-abyss-600: #08202d;
  --color-abyss-500: #073040;
  --color-abyss-400: #073c4f;

  /* --- Palette: accents -------------------------------------------------
     Aqua carries interaction, lime carries "live / shipped" status. */
  --color-aqua-100: #e8fbff;
  --color-aqua-200: #b6f2ff;
  --color-aqua-300: #8ff0ff;
  --color-aqua-400: #6ee7ff;
  --color-aqua-500: #35c9ee;
  --color-aqua-600: #17a2c9;
  --color-aqua-700: #0e7f9c;

  --color-lime-300: #dcffa8;
  --color-lime-400: #c3f56a;
  --color-lime-500: #9be03c;
  --color-lime-600: #74b524;

  /* --- Palette: text ----------------------------------------------------
     Verified against the *effective* background — page gradient + backdrop
     glow + panel tint + sheen — not the raw page colour.

     There are deliberately only two text tones. A third, dimmer one cannot
     clear AA once the glow sits behind it, so small print uses size,
     letter-spacing, and caps for hierarchy instead of a lighter grey. */
  --color-text: #f2fbfd;
  --color-text-muted: #b8d1db;
  --color-text-invert: #03121a;

  /* --- Surfaces ---------------------------------------------------------
     Flat translucent panels. One solid tint, a hairline border, and a light
     backdrop blur — no gradient, no sheen, no bevel, no speckle. The depth
     comes from the blur and the border alone, which is what keeps these
     reading as clean UI surfaces rather than a simulated material. */
  --panel-bg: rgba(11, 27, 37, 0.68);
  --panel-bg-raised: rgba(17, 39, 51, 0.74);
  --panel-border: rgba(150, 195, 214, 0.16);
  --panel-border-strong: rgba(165, 218, 238, 0.32);
  --panel-blur: 18px;

  /* --- Cursor ------------------------------------------------------------
     Dot leads, ring trails and settles behind it. */
  --cursor-dot: 7px;
  --cursor-ring: 34px;
  --cursor-ring-hover: 52px;

  /* --- Shadow / bloom ---------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.52);
  --shadow-panel: 0 18px 44px rgba(2, 10, 16, 0.55);
  --bloom-aqua: 0 0 18px rgba(110, 231, 255, 0.3);
  --bloom-aqua-soft: 0 0 28px rgba(53, 201, 238, 0.16);
  --bloom-lime: 0 0 16px rgba(155, 224, 60, 0.28);

  /* --- Gradients --------------------------------------------------------- */
  --gradient-page: linear-gradient(
    to bottom,
    var(--color-abyss-900) 0%,
    var(--color-abyss-800) 22%,
    var(--color-abyss-700) 48%,
    var(--color-abyss-600) 74%,
    var(--color-abyss-500) 100%
  );
  --gradient-hairline: linear-gradient(
    to right,
    rgba(150, 195, 214, 0.26) 0%,
    rgba(150, 195, 214, 0.08) 62%,
    transparent 100%
  );

  /* --- Typography --------------------------------------------------------
     Humanist sans stack. Self-hosted brand faces drop into assets/fonts/ and
     are picked up by the @font-face rules in base.css — see the note there. */
  --font-heading: "Dante Display", "Segoe UI Variable Display", "Segoe UI",
    Frutiger, "Frutiger Linotype", "Myriad Pro", Myriad, Optima, Candara,
    "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif;
  --font-body: "Dante Text", "Segoe UI Variable Text", "Segoe UI", Frutiger,
    "Frutiger Linotype", "Myriad Pro", Myriad, Candara, "DejaVu Sans",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* Fluid scale — min at 360px, max at 1440px. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.45vw, 2.75rem);
  --text-4xl: clamp(2.375rem, 1.7rem + 3vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.16em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;
  --spacing-4xl: 8rem;

  /* --- Layout ------------------------------------------------------------ */
  --width-content: 68rem;
  --width-prose: 42rem;
  --gutter: var(--spacing-md);
  --header-height: 4.5rem;


  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------------ */
  --ease: ease;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --duration-fast: 200ms;
  --duration-base: 280ms;
  --duration-slow: 400ms;

  /* Hero entrance. The expo-out curve covers most of the distance early and
     settles slowly, which reads as drifting into place rather than sliding. */
  --duration-float: 760ms;
  --ease-float: cubic-bezier(0.16, 1, 0.3, 1);
  --float-distance: 3.5rem;

  /* --- Z-index ------------------------------------------------------------ */
  --z-backdrop: 0;
  --z-content: 2;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-skip: 200;
  --z-cursor: 300;
}