/* ==========================================================================
   TEQONE — TOKENS
   One fixed theme. The page opens on a dark cover and resolves into light
   sections; there is no light/dark switch, so every token below is absolute.
   ========================================================================== */

:root {
  /* ---- Fluid unit ------------------------------------------------------
     Root font-size scales 13px @1024 -> 17px @1920. Spacing is expressed in
     rem so the whole page scales as one object, and never resolves against a
     local font-size. */
  --unit-width: clamp(14px, calc(14px + 3 * ((100vw - 768px) / 1032)), 17px);

  /* ---- Layout -----------------------------------------------------------
     The shell is fluid, not a fixed cap. The previous 1240px ceiling meant a
     16-inch display got exactly the same column as a 13-inch one with dead
     margin either side; these grow with the viewport and stop at a readable
     maximum. */
  --shell: min(1440px, 92vw);
  --shell-wide: min(1660px, 95vw);
  --gutter: 2rem;
  --section-y: 8.5rem;
  --section-y-sm: 5rem;
  --nav-h: 4.5rem;

  /* ---- Spacing (rem, never em) ----------------------------------------- */
  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;

  /* ---- Hierarchy rhythm -------------------------------------------------
     One ladder, used by every section so blocks never visually merge:
     eyebrow -> headline -> supporting copy -> action */
  --gap-eyebrow-head: 1.25rem;
  --gap-head-body: 1.5rem;
  --gap-body-cta: 2.25rem;
  --gap-head-content: 3.5rem;   /* section header -> its grid/list */
  --pad-card: 1.75rem;

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* ---- Brand ----------------------------------------------------------- */
  --blue: #0057ff;
  --blue-hi: #2b74ff;
  --blue-lo: #0043c9;
  --blue-ink: #ffffff;

  /* ---- Product identity -------------------------------------------------
     One platform, one language. Products are NOT differentiated by hue —
     a green club product next to an orange POS product next to a purple field
     product reads as seven unrelated companies. Every product mark uses the
     same navy surface derived from the TeqBooks rail; differentiation comes
     from the glyph, and blue is reserved for emphasis and action. */
  --mark: #0e2148;          /* TeqBooks rail navy */
  --mark-ink: #ffffff;
  --mark-live: var(--blue); /* shipping products earn the accent */
  --mark-soft: #eef2fb;     /* light-surface mark on white sections */
  --mark-soft-ink: #14306b;

  /* ---- Dark cover ------------------------------------------------------ */
  --d-bg: #05070e;
  --d-bg-2: #080b16;
  --d-ink: #ffffff;
  --d-ink-2: #97a1b8;
  --d-ink-3: #5d6782;
  --d-line: rgba(255, 255, 255, 0.10);
  --d-line-2: rgba(255, 255, 255, 0.18);
  --d-glass: rgba(255, 255, 255, 0.055);
  --d-glass-2: rgba(255, 255, 255, 0.09);

  /* ---- Light body ------------------------------------------------------ */
  --l-bg: #ffffff;
  --l-bg-2: #f6f7fa;
  --l-bg-3: #eef0f5;
  --l-ink: #080b14;
  --l-ink-2: #5a6274;
  --l-ink-3: #8b93a5;
  --l-line: rgba(8, 11, 20, 0.09);
  --l-line-2: rgba(8, 11, 20, 0.16);
  --l-glass: rgba(255, 255, 255, 0.72);

  /* ---- Elevation ------------------------------------------------------- */
  --lift-1: 0 1px 2px rgba(8, 11, 20, 0.05), 0 4px 12px -4px rgba(8, 11, 20, 0.07);
  --lift-2: 0 2px 4px rgba(8, 11, 20, 0.05), 0 16px 32px -12px rgba(8, 11, 20, 0.13);
  --lift-3: 0 8px 20px -6px rgba(8, 11, 20, 0.12), 0 32px 64px -20px rgba(8, 11, 20, 0.22);
  --lift-blue: 0 8px 24px -8px rgba(0, 87, 255, 0.45);

  /* ---- Motion ---------------------------------------------------------- */
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Type ------------------------------------------------------------ */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   BREAKPOINT SCALE
   639 phone · 767 large phone · 1023 tablet · 1279 small laptop · 1536+ large
   -------------------------------------------------------------------------- */

/* Tablet — its own scale, not the phone's */
@media (max-width: 1023px) {
  :root {
    --shell: 94vw;
    --shell-wide: 96vw;
    --gutter: 1.75rem;
    --section-y: 6rem;
    --section-y-sm: 3.5rem;
  }
}

/* Phone */
@media (max-width: 767px) {
  :root {
    --unit-width: 15px;
    --shell: 100%;
    --shell-wide: 100%;
    --gutter: 1.25rem;
    --section-y: 4.5rem;
    --section-y-sm: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Horizontal and vertical are decided SEPARATELY.

   A 16-inch laptop is wide AND short (1728x1010), so it matches a
   "large display" width rule and a "short viewport" height rule at the same
   time. Mixing both axes into one query meant whichever rule came last won,
   and a 16-inch got big-screen vertical padding on a 1010px-tall viewport.
   -------------------------------------------------------------------------- */

/* Horizontal: wide screens get a wider column, not just bigger margins. */
@media (min-width: 1536px) {
  :root {
    --shell: min(1560px, 90vw);
    --shell-wide: min(1720px, 94vw);
    --gutter: 2.5rem;
  }
}

/* Vertical: only genuinely tall viewports get the generous rhythm. */
@media (min-height: 1011px) and (min-width: 1536px) {
  :root { --section-y: 10rem; }
}

/* Vertical: short viewports (13"/14"/16" laptops) pull the rhythm in so the
   cover's diagram is not pushed below the fold. Width-independent. */
@media (min-width: 1024px) and (max-height: 1010px) {
  :root {
    --section-y: 6.5rem;
    --nav-h: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}