/* ==========================================================================
   GhazTech Design System — Tokens
   Color system, typography scale, spacing scale, radii, shadows, motion.
   ========================================================================== */

:root {
  /* ---- Color: Modern Commercial Palette — vivid blue + orange, light mode ---- */
  --color-cream-50: #fbfcff;
  --color-cream-100: #f3f7fd;
  --color-cream-200: #e8f0fb;
  --color-sun-200: #ffdfb0;
  --color-sun-400: #ff9a3d;
  --color-sun-600: #e8730c;
  --color-blue-100: #dde9ff;
  --color-blue-200: #b9d2ff;
  --color-blue-400: #4f7fe6;
  --color-blue-600: #2c56c9;
  --color-blue-800: #163a99;
  --color-blue-900: #0d2764;
  --color-ink-900: #12162b;
  --color-ink-700: #2a3050;
  --color-sub-600: #545a78;
  --color-muted-500: #888ea8;
  --color-white: #ffffff;
  --color-danger: #c0442c;
  --color-success: #2f8f5b;

  /* ---- Glass surfaces ---- */
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 20px 60px rgba(22, 58, 153, 0.14);
  --glass-shadow-lift: 0 32px 80px rgba(22, 58, 153, 0.22);
  --glass-blur: 18px;

  /* ---- Semantic tokens ---- */
  --surface-page: var(--color-cream-100);
  --surface-card: var(--glass-fill);
  --surface-card-strong: var(--glass-fill-strong);
  --text-heading: var(--color-ink-900);
  --text-body: var(--color-sub-600);
  --text-muted: var(--color-muted-500);
  --text-on-dark: rgba(255, 255, 255, 0.88);
  --text-on-dark-sub: rgba(255, 255, 255, 0.66);
  --brand-primary: var(--color-blue-800);
  --brand-primary-strong: var(--color-blue-900);
  --brand-accent: var(--color-sun-400);
  --brand-accent-strong: var(--color-sun-600);
  --border-soft: rgba(22, 58, 153, 0.14);
  --border-soft-2: rgba(22, 58, 153, 0.08);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-normal: 1.7;

  --tracking-wide: 0.14em;
  --tracking-normal: 0.01em;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  /* Section rhythm. These were a full step larger and left the pages feeling
     stretched out — each block floated alone with dead space around it. Tuned
     down so sections read as one continuous page rather than a slideshow. */
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;

  --container-gutter: 6vw;

  /* ---- Form control geometry ----
     The floating label, the show/hide button and the valid tick are all
     absolutely positioned inside .form-field, which also holds help text,
     errors and (on sign-up) a strength meter — so none of them can use a
     percentage of the field. They key off the input's own metrics instead,
     and --field-height is DERIVED from those parts rather than guessed, so
     it stays exact when the type size changes (phones bump --field-font to
     16px to stop iOS auto-zooming, and everything below follows). */
  --field-font: 0.95rem;
  --field-line-height: 1.4;
  --field-pad-top: 1.5rem;
  --field-pad-bottom: 0.6rem;
  --field-pad-inline: 1rem;
  --field-border: 1.5px;
  --field-line: calc(var(--field-font) * var(--field-line-height));
  --field-height: calc(
    var(--field-pad-top) + var(--field-pad-bottom) + var(--field-line) + var(--field-border) * 2
  );
  /* Gap between the input's top border and the floated (shrunk) label. */
  --field-float-gap: 0.4rem;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 420ms;
  --duration-slow: 720ms;

  /* ---- Layout ---- */
  --nav-height: 84px;
  --nav-height-scrolled: 68px;
  --z-bg: -2;
  --z-texture: -1;
  --z-base: 1;
  --z-nav: 500;
  --z-overlay: 800;
  --z-toast: 900;
}

/* This project keeps a light, ambient organic theme at all times, since the
   brand system is explicitly light-first — it does not switch automatically
   with the OS's prefers-color-scheme. The dark-mode-ready token structure
   below remains available and is opted into explicitly via [data-theme="dark"]
   on the root element (e.g. a future user-facing theme toggle). */
:root[data-theme="dark"] {
  --surface-page: #171a15;
  --color-cream-100: #171a15;
  --color-cream-200: #1e2219;
  --glass-fill: rgba(35, 40, 32, 0.55);
  --glass-fill-strong: rgba(35, 40, 32, 0.8);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --glass-shadow-lift: 0 32px 80px rgba(0, 0, 0, 0.55);
  --text-heading: #f3efe4;
  --text-body: #c9c6b8;
  --text-muted: #8d8a7c;
  --border-soft: rgba(255, 255, 255, 0.1);
  --border-soft-2: rgba(255, 255, 255, 0.06);
  --brand-accent: #ffdfb0;
}