/*
 * THE central file for colour, type, space and motion on the showcase gallery
 * (prefix --g-), the concept ribbon (prefix --ribbon-) and EPE's cookie consent
 * banner (prefix --consent-, on every page). Nothing else may
 * write a design value (plans/CONTRACT.md §2). Concept sites keep their OWN
 * token file (prefix --s-) and must not look like EPE.
 *
 * The gallery IS an EPE page: these values mirror the main site
 * (eliteperformanceexclusive.com — pp-dark, pp-blue, pp-orange, Inter).
 */
:root {
    /* EPE surfaces + text */
    --g-ink: #0a0a0a;
    --g-ink-raised: #111111;
    --g-ink-card: #ffffff08;
    --g-ink-card-hover: #ffffff0f;
    --g-text: #ffffff;
    --g-text-soft: #ffffffad;
    --g-text-muted: #ffffff73;
    --g-text-faint: #ffffff59;
    --g-line: #ffffff14;
    --g-line-strong: #ffffff29;
    --g-nav-bg: #0a0a0ad9;
    --g-menu-bg: #000000f2;
    --g-overlay: #000000d9;
    --g-shadow: #00000080;

    /* EPE brand */
    --g-blue: #0055ff;
    --g-blue-light: #3377ff;
    --g-blue-wash: #0055ff29;
    --g-blue-glow: #0055ff38;
    --g-blue-pulse: #0055ff99;
    --g-blue-clear: #0055ff00;
    --g-orange: #ff6b00;
    --g-orange-light: #ff8533;
    --g-orange-wash: #ff6b001f;

    /* Concept-site accents — one per site; config 'accent' names these */
    --site-nightweave: #e3263b;
    --site-vesperwood: #9b8c6a;
    --site-halberd-stone: #f2a900;
    --site-corvane-air: #b8c4d6;
    --site-morrow-rook: #b8734a;
    --site-vantrell: #c6ff00;
    --site-solenne-atoll: #3fc1c0;
    --site-ashgrove-kell: #e2412c;
    --site-varrow-house: #8a7f5c;
    --site-ostrander-quill: #6c8ebf;
    --site-caldermoor: #a0743a;
    --site-fernhallow: #d98aa3;
    --site-saltmere: #8fb3ad;
    --site-cathy-florist: #4f7a52;
    --site-juno-halloran: #8a4a6a;
    --site-halvard-plow: #f07c2a;
    --site-lumenbay: #4f8fe0;
    --site-pellmarsh: #7f9a4e;
    --site-quennell-hand: #7b4ae2;
    --site-orvanthe: #2f3fe8;
    --site-wexmoor-county: #0e6a86;
    --site-teodora-ravelle: #d81b60;
    --site-corrowden: #3aa489;

    /* Concept ribbon (on every concept site, so it carries EPE's own colours) */
    --ribbon-bg: #0a0a0a;
    --ribbon-text: #ffffff;
    --ribbon-muted: #ffffff8c;
    --ribbon-rule: #ffffff26;
    --ribbon-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ribbon-size: 12px;

    /* Type — Inter, as on the main site */
    --g-font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --g-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --g-h1: clamp(2.6rem, 7vw, 5.4rem);
    --g-h2: clamp(2rem, 4.6vw, 3.4rem);
    --g-h3: clamp(1.35rem, 2.2vw, 1.75rem);
    --g-lede: clamp(1.05rem, 1.6vw, 1.3rem);
    --g-body: 1rem;
    --g-small: 0.875rem;
    --g-micro: 0.8125rem;
    --g-track-tight: -0.04em;
    --g-track-h2: -0.03em;
    --g-track-wide: 0.2em;
    --g-track-pill: 0.06em;
    --g-weight-regular: 400;
    --g-weight-medium: 500;
    --g-weight-semi: 600;
    --g-weight-bold: 700;
    --g-weight-heavy: 800;
    --g-leading-solid: 1;
    --g-leading-h1: 0.98;
    --g-leading-h2: 1.04;
    --g-leading-body: 1.6;
    --g-leading-loose: 1.65;
    --g-url-size: 11px;
    --g-url-leading: 24px;
    --g-label-size: 12px;
    --g-close-size: 20px;
    --ribbon-weight: 500;
    --ribbon-leading: 1.4;
    --ribbon-track: 0.08em;

    /* Space + shape */
    --g-wrap: 1200px;
    --g-gutter: 24px;
    --g-section: 120px;
    --g-section-sm: 84px;
    --g-nav-h: 76px;
    --g-radius-sm: 12px;
    --g-radius: 20px;
    --g-radius-lg: 28px;
    --g-pill: 999px;
    --g-touch: 44px;
    /* Header logo: EPE's own size (x-logo h-8 md:h-10 = 32px phone, 40px desktop) */
    --g-logo-h: 40px;
    --g-logo-h-sm: 32px;
    /* Welcome strip above the header (as on eliteperformanceexclusive.com) */
    --g-welcome-dot: #4ade80;
    --g-welcome-size: 11px;
    --g-welcome-h: 34px;
    /* 404 page — the main site's errors/404.blade.php, value for value */
    --g-404-seconds: 5;
    --g-404-tick: 1000ms;
    --g-404-blue-mid: #2b7fff;
    --g-404-road: #ffffff0f;
    --g-404-ring-track: #ffffff0f;
    --g-404-watermark: #ffffff04;
    --g-404-road-dur: 2s;
    --g-404-logo-h: 64px;

    /* Cookie consent banner — EPE's components/cookie-consent.blade.php, value for value */
    --consent-bg: #111113;
    --consent-line: #ffffff1a;
    --consent-shadow: #00000080;
    --consent-text: #ffffffb3;
    --consent-strong: #ffffffcc;
    --consent-link: #3377ff;
    --consent-btn-line: #ffffff26;
    --consent-btn-text: #ffffff99;
    --consent-btn-hover: #ffffff0d;
    --consent-accent: #0055ff;
    --consent-accent-hover: #0055ffcc;
    --consent-on-accent: #ffffff;
    --consent-font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --consent-size: 14px;
    --consent-leading: 1.625;
    --consent-weight: 500;
    --consent-max: 672px;
    --consent-pad: 24px;
    --consent-gap: 16px;
    --consent-radius: 16px;
    --consent-btn-pad-y: 8px;
    --consent-btn-pad-x: 20px;
    --consent-edge: 16px;
    --consent-z: 9997;
    --consent-dur: 200ms;
    --g-preview-w: 1440px;
    --g-preview-h: 900px;
    /* Preview scale before JS measures the window (gallery.js sets it per window) */
    --g-scale: 0.3;
    --g-phone-w: 390px;
    --g-phone-h: 844px;
    --g-bp-tablet: 860px;
    /* Below this the welcome strip says "From" instead of "Visiting from" (the main site's sm breakpoint) */
    --g-bp-sm: 639px;


    /* The reel: lead pieces, chapters and the industry filter (index.php work section) */
    --g-lead-name: clamp(2.2rem, 3.4vw, 3.1rem);
    --g-chapter-title: clamp(1.6rem, 2.8vw, 2.3rem);
    --g-chip-h: 44px;
    --g-filter-h: 56px;
    --g-launcher-room: 80px;
    --guide-label-max: 180px;      /* the launcher's label, so it can tuck away (guide.css .sg-tucked) */
    --g-filter-fade: 120px;
    --g-grid-gap-x: 32px;
    --g-grid-gap-y: 72px;
    --g-grid-gap-y-sm: 48px;
    --g-measure-line: 52ch;
    --g-measure-chapter: 46ch;
    --g-num-track: 0.14em;
    --g-filter-fade-dur: 260ms;
    --g-bp-reel: 1100px;
    /* Hero windows: height of the fanned stack (phone; desktop sets its own in gallery.css) */
    --g-hero-stack-h: 250px;
    --g-hero-stack-h-lg: 420px;

    /* Effects */
    --g-blur-nav: 20px;
    --g-blur-overlay: 12px;
    --g-lift: -4px;
    --g-lift-sm: -2px;

    /* Motion */
    --g-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    /* GSAP's name for the same curve family as --g-ease */
    --g-ease-gsap: power3.out;
    --g-dur-fast: 200ms;
    --g-dur: 320ms;
    --g-dur-slow: 700ms;
    --g-dur-pulse: 2400ms;
    --g-dur-cue: 1800ms;
    /* Hero windows: a new photo-led site every 4 s, as the main site's /tech portfolio deck */
    --g-hero-rotate: 4000ms;
    --g-hero-leave: translateX(60%) rotate(12deg);
    --g-reveal-y: 28px;
    --g-reveal-stagger: 0.08;
    --g-reveal-dur: 0.9;
    /* Preload a live preview when its card is this close to the viewport */
    --g-preload-margin: 600px;
    /* The guide (assets/css/guide.css): the main site's chat box, same sizes and layers. Closed it
       sits under the cookie banner (--consent-z 9997); open it sits above it. */
    --guide-z: 9990;
    --guide-z-open: 9998;
    --guide-edge: 20px;
    --guide-width: 400px;
    --guide-height: 640px;
    --guide-radius: 18px;
    --guide-online: #22c55e;
    --guide-chip-hover: #0055ff24;
    --guide-leading: 1.5;
    --guide-leading-tight: 1.35;
    --guide-leading-chip: 1.2;
    --guide-track: 0.12em;
}