/* =============================================================
   XPixel - design tokens
   BYQ-style skin (30 Sep 2026): values measured from byq.supply's
   light theme - warm stone page (#F0EEED), near-black ink (#070708)
   at 88% for body and 64% for secondary copy, one lime CTA fill,
   8px controls, Geist + Geist Mono. BYQ's display face (Raveo
   Display) is commercial, so Geist stands in for it. Every component
   reads these semantic tokens, so the skin lives almost entirely here.
   ============================================================= */

:root {
  color-scheme: light;

  /* ---- Surfaces - one stone page, white panels ---------------------------- */
  --bg: #F0EEED;              /* page - BYQ light theme */
  --bg-warm: #F0EEED;         /* bands use the page tone: one background throughout */
  --surface: #FFFFFF;         /* cards, panels, nav */
  --surface-2: #F7F6F5;       /* nested panels, inputs */
  --surface-3: #E8E6E4;       /* raised elements inside a panel */
  --surface-4: #DCDAD7;       /* highest - hover fills, mock media */
  --line: rgba(7, 7, 8, 0.08);        /* BYQ hairline */
  --line-strong: rgba(7, 7, 8, 0.16);
  --line-soft: rgba(7, 7, 8, 0.07);   /* page column rules */

  /* ---- Ink - BYQ #070708 at three strengths (solid equivalents on the page) */
  --fg: #070708;              /* headings */
  --fg-2: #232324;            /* body copy - ink at 88% */
  --muted: #5B5A5A;           /* secondary copy - ink at 64%, 5.9:1 on the page */
  --faint: #A3A1A0;           /* decoration only - never body text */

  /* ---- Glass - frosted surfaces over photography and colour washes.
     A translucent fill plus backdrop-filter, with a bright inner edge
     to read as an actual pane of glass rather than a plain opacity
     drop. Applied to elevated "floating" surfaces only (cards, the
     nav pill, on-image chips) - never to large scrolling containers,
     per the perf guardrail against continuous backdrop-filter repaint.
     A @supports fallback (components.css) swaps in a solid --surface
     fill for browsers without backdrop-filter. --------------------- */
  --glass-fill: rgba(255, 255, 255, 0.8);       /* BYQ nav/panel fill */
  --glass-fill-strong: #FFFFFF;
  --glass-border: rgba(7, 7, 8, 0.08);          /* hairline around the panel */
  --glass-edge: rgba(255, 255, 255, 0.7);       /* bright top edge inside the panel */
  --glass-blur: 12px;

  /* ---- Accent - BYQ lime, CTAs and live states only ------------------ */
  --accent: #C5EF57;
  --accent-deep: #B3DE42;     /* hover / pressed fill */
  --accent-ink: #070708;      /* text on lime - 15.6:1 */
  --accent-text: #4E6B00;     /* lime family as text/icon - 5.3:1 on the page */
  --accent-soft: rgba(197, 239, 87, 0.35);
  --accent-glow: rgba(197, 239, 87, 0.45);

  /* ---- Data - one cool accent for charts, events and tracking -------- */
  --data: #1F6A9E;             /* 4.9:1 on paper */
  --data-soft: rgba(31, 106, 158, 0.12);

  /* ---- Signal - amber for "gap / disconnected" states and placeholders */
  --alert: #8F4C0D;            /* 5.0:1 on its own soft-tint chip background, 5.7:1 on paper */
  --alert-soft: rgba(154, 82, 18, 0.12);

  --focus: #070708;

  /* ---- Interactive fills - derived from the ink, so they invert with it */
  --hover-fill: color-mix(in srgb, var(--fg) 5%, transparent);
  --active-fill: color-mix(in srgb, var(--fg) 8%, transparent);

  /* ---- Depth - controlled; borders carry structure, shadows carry layering */
  --shadow-1: 0 1px 2px rgba(7, 7, 8, 0.04);
  --shadow-2: 0 12px 32px -14px rgba(7, 7, 8, 0.16);
  --shadow-3: 0 24px 48px -18px rgba(7, 7, 8, 0.2);

  /* ---- Component families - BYQ's radius set: 8px on controls and
     mosaic tiles, 16px on feature images and section cards, 12px tags. */
  --radius-card: 1rem;       /* 16px - section-level cards and feature images */
  --radius-tile: 0.5rem;     /* 8px - mosaic tiles, mock panels */
  --radius-control: 0.75rem; /* 12px - tags and chips */
  --radius-shell: 1rem;
  --radius-shell-gap: 0.375rem;
  --shadow-card: var(--shadow-1);
  --shadow-card-hover: var(--shadow-2);

  /* ---- Photography - one grade for every placeholder so mixed stock
     reads as a single commissioned set ----------------------------------- */
  --photo-grade: none;        /* BYQ shows imagery ungraded */

  /* ---- Type -----------------------------------------------------------
     Two families, as on BYQ: a grotesk for everything (Geist, standing
     in for the commercial Raveo Display) and Geist Mono for tags,
     eyebrows and numerals. Headings are weight 500 with tight negative
     tracking; no serif anywhere. */
  --font-display: var(--font-body);
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid sizes, capped at BYQ's desktop values. */
  --fs-hero: clamp(2.5rem, 1.1rem + 3.2vw, 4rem);         /* 40 → 64 */
  --fs-tagline: clamp(2.5rem, 1.1rem + 3.2vw, 4rem);      /* 40 → 64 */
  --fs-h2: clamp(2.5rem, 1.1rem + 3.2vw, 4rem);           /* 40 → 64 - section headings; 40px on every phone, a clear step below the 56px hero and 22px card titles */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.5rem);       /* 22 → 24 */
  --fs-h4: 1.125rem;                                       /* 18 (lg) */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20 (lg → xl) */
  --fs-body: 1rem;                                         /* 16 */
  --fs-sm: 0.875rem;                                       /* 14 */
  --fs-xs: 0.75rem;                                        /* 12 */
  --fs-label: 0.75rem;                                     /* 12, tracked uppercase */

  --lh-display: 0.84;          /* BYQ hero: 96px on an 80px line */
  --lh-tight: 1;
  --lh-heading: 1.17;
  --lh-body: 1.5;
  --lh-snug: 1.4;
  --tracking-display: -0.036em;  /* BYQ hero: -3.5px at 96px */
  --tracking-tight: -0.01em;
  --tracking-hero: -0.031em;     /* BYQ h2: -2px at 64px */
  --tracking-label: 0.0625em;    /* BYQ mono tags: 0.75px at 12px */
  --tracking-mono: 0.0625em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;          /* hard cap */

  /* ---- Space - fixed 13-step scale, nothing outside it ------------- */
  --space-0: 0;
  --space-25: 0.125rem;   /* 2px */
  --space-50: 0.25rem;    /* 4px */
  --space-75: 0.5rem;     /* 8px */
  --space-100: 0.75rem;   /* 12px */
  --space-200: 1rem;      /* 16px */
  --space-300: 1.5rem;    /* 24px */
  --space-400: 2rem;      /* 32px */
  --space-500: 2.5rem;    /* 40px */
  --space-600: 3rem;      /* 48px */
  --space-700: 4rem;      /* 64px */
  --space-800: 5rem;      /* 80px */
  --space-900: 6rem;      /* 96px */

  /* Section rhythm - three registers, not one padding everywhere. */
  --section-y: clamp(3rem, 2rem + 4vw, 6rem);          /* 48 → 96 */
  --section-y-tight: clamp(2rem, 1.5rem + 2vw, 4rem);  /* 32 → 64 */
  --section-y-loose: clamp(4rem, 2.5rem + 5vw, 8rem);  /* 64 → 128 */

  /* ---- Layout - 12-column grid inside a container that widens up to
     1600px on large screens (max-width only caps it, so it still
     shrinks to fit anything narrower - this isn't a new breakpoint,
     just a higher ceiling on the existing one). 1600 lands on the 8px
     grid exactly (200 × 8px); 1580 would not (197.5 × 8px). --------- */
  --container: 100rem;                         /* 1600px */
  --container-pad: clamp(1rem, 2.4vw, 2rem);   /* BYQ: 32px gutters */
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --measure: 40rem;                            /* 640px - reading cap */
  --measure-short: 30rem;                      /* 480px - one-liners under headings */
  --header-height: 68px;

  /* ---- Control sizes - three, used by every small control ------------ */
  --control-sm: 36px;                          /* nav links, small rings */
  --btn-sm-h: 36px;                            /* small buttons; 44px on touch screens (below) */
  --control-md: 40px;                          /* toggle, icon boxes */
  --tap-target: 44px;                          /* every real button */

  /* ---- Floating navigation ------------------------------------------- */
  --nav-inset: 1rem;                           /* distance from viewport edges; 1.5rem (24px) on desktop */
  --nav-pill: 54px;                            /* BYQ nav bar height */
  --nav-pill-compact: 48px;                    /* height once scrolled */
  --nav-blur: 12px;

  /* ---- Display type - the hero only; sized so the longest rotating
     phrase ("Connected commerce") stays on one line at 360px wide -------- */
  --fs-display: clamp(3.5rem, 1.6rem + 5.4vw, 6rem);      /* 56 → 96, BYQ hero. On phones the rotating phrase stacks to two lines (sections.css) so it never caps this size */

  /* ---- Mosaic and progressive blur ------------------------------------- */
  --mosaic-bleed: 6vw;                         /* how far the wall runs past the viewport edges */
  --mosaic-gap: clamp(0.5rem, 1vw, 0.875rem);
  --blur-edge: clamp(120px, 18vw, 260px);

  /* ---- Band edges - how far a coloured band blends into the page
     colour at the one or two edges where it actually meets a different
     surface (see .band in base.css) ------------------------------------ */
  --band-blend: clamp(2.5rem, 6vw, 5rem);

  /* ---- Radius - Tailwind steps only --------------------------------- */
  --radius-xs: 0.25rem;    /* 4px  - chips, mock lines */
  --radius-sm: 0.375rem;   /* 6px  - inputs, small buttons */
  --radius-md: 0.5rem;     /* 8px  - buttons */
  --radius-lg: 0.75rem;    /* 12px - cards, mock panels */
  --radius-xl: 1rem;       /* 16px - large panels, section frames */
  --radius-full: 9999px;   /* pills only, never a card */

  /* ---- Motion - custom easing only, never a default transition ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-heavy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* button-in-button hover, magnetic overshoot */
  --duration-fast: 200ms;
  --duration: 400ms;
  --duration-slow: 700ms;
  --duration-reveal: 900ms;
  --duration-media: 1200ms;    /* hover zoom on photography */
  --duration-press: 130ms;     /* pill button press */
}

@media (min-width: 64em) {
  :root { --header-height: 76px; }
}

/* =============================================================
   Ink scope - the one dark surface on the page, used for the final
   call to action and the footer. Nothing is restyled: the semantic
   tokens are remapped and every component reads them as usual.
   Moved to a neutral grey-black (2 Oct 2026) to match the light
   scope's white/grey pairing rather than the retired espresso tone.
   Contrast on #131316: --fg 17.8:1, --fg-2 12.8:1, --muted 7.0:1,
   --accent 4.7:1 (used as --accent-text and --focus), --data 8.8:1,
   --alert 8.5:1.
   ============================================================= */
.scope-ink {
  color-scheme: dark;
  --bg: #070708;              /* BYQ dark theme */
  --bg-warm: #070708;
  --surface: #131315;
  --surface-2: #1B1B1D;
  --surface-3: #252527;
  --surface-4: #313133;
  --line: rgba(241, 241, 241, 0.08);
  --line-strong: rgba(241, 241, 241, 0.16);
  --line-soft: rgba(241, 241, 241, 0.06);
  --fg: #F1F1F1;
  --fg-2: #D5D5D5;            /* #F1F1F1 at 88% */
  --muted: #9C9C9D;           /* #F1F1F1 at 64% */
  --faint: #5C5C5D;
  --glass-fill: rgba(19, 19, 21, 0.8);
  --glass-fill-strong: #131315;
  --glass-border: rgba(241, 241, 241, 0.08);
  --glass-edge: rgba(241, 241, 241, 0.06);
  --accent-text: var(--accent);
  --accent-soft: rgba(197, 239, 87, 0.16);
  --accent-glow: rgba(197, 239, 87, 0.28);
  --data: #7DB9E8;
  --data-soft: rgba(125, 185, 232, 0.14);
  --alert: #E1A26B;
  --alert-soft: rgba(225, 162, 107, 0.14);
  --focus: var(--accent);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  background: var(--bg);
  color: var(--fg-2);
}

/* Touch screens: every small button meets the 44px minimum tap height. */
@media (pointer: coarse) {
  :root { --btn-sm-h: 44px; }
}