/* 3D Gorilla · tokens.css
   Base: CYBERSPHERE v2 design system, LIGHT theme (values copied verbatim from
   /home/box/shared/design-systems/cybersphere/tokens.css, light block).
   Project additions are prefixed --g3d- and listed at the bottom. */
@font-face{font-family:"D-DIN";src:url("fonts/D-DIN-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"D-DIN";src:url("fonts/D-DIN-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root, :root[data-theme="light"] {
  /* primitives (Cybersphere) */
  --white:#ffffff; --spectral:#f0f0fa; --black:#000000;
  --gray-25:#f7f7fc; --gray-50:#ebebf4; --gray-100:#dfdfe8; --gray-200:#c6c7d0; --gray-300:#a2a3ac;
  --gray-400:#8a8b94; --gray-500:#60616a; --gray-600:#45464d; --gray-700:#303136; --gray-750:#252628;
  --gray-800:#1f2024; --gray-850:#18181c; --gray-900:#111114; --gray-950:#0a0a0c;
  /* semantic, light theme (Cybersphere) */
  --bg:var(--white); --bg-subtle:var(--gray-25); --bg-muted:var(--gray-50); --bg-emphasis:var(--gray-100);
  --bg-raised:var(--white); --bg-inverse:var(--black);
  --scrim:#00000080; --scrim-strong:#000000cc;
  --line-subtle:#0a0a0c14; --line:#0a0a0c2e; --line-strong:#0a0a0c80;
  --text:var(--gray-950); --text-strong:var(--black); --text-secondary:var(--gray-600); --text-tertiary:var(--gray-500);
  --text-disabled:var(--gray-200); --text-inverse:var(--spectral); --text-on-media:var(--spectral);
  --action-primary:var(--bg-inverse); --action-primary-hover:var(--gray-750);
  --focus:var(--black); --selection:#0a0a0c26;
  /* fonts */
  --font-display:"D-DIN","DIN Alternate",Bahnschrift,"Arial Narrow",Arial,sans-serif;
  --font-sans:Geist,"SF Pro Text",-apple-system,system-ui,"Segoe UI",Arial,sans-serif;
  --font-mono:"Geist Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  /* spacing (4px grid) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;
  /* shape, depth, motion */
  --radius-0:0; --radius-sm:4px; --radius-pill:9999px;
  --shadow-overlay:0 0 0 1px #0a0a0c1a, 0 16px 40px #0a0a0c26;  /* light value (source file prints it as JSON) */
  --focus-ring:0 0 0 2px #ffffff, 0 0 0 4px #000000;             /* light value */
  --opacity-ghost:.1; --opacity-disabled:.4;
  --duration-instant:100ms; --duration-fast:160ms; --duration-base:240ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --bp-sm:600px; --bp-md:960px; --bp-lg:1280px; --container-max:1440px; --text-max:680px;
  --nav-height:72px; --tap-min:44px; --stroke-hairline:1px; --stroke-icon:1.5px; --stroke-focus:2px;

  /* ---- 3D Gorilla project tokens ---- */
  /* Filament swatches: product DATA, not brand colour. Shown only as swatches and in product photos,
     always with the colour name in words. */
  --g3d-swatch-preto:#1a1a1a; --g3d-swatch-branco:#ffffff; --g3d-swatch-cinza:#9a9ca3;
  --g3d-swatch-azul:#4a6fa5; --g3d-swatch-vermelho:#d8453b; --g3d-swatch-amarelo:#f2cf5b;
  --g3d-swatch-size:32px;          /* visual dot inside a 44px tap target */
  --g3d-logo:"c";                  /* informational; logo C is final (no switch) */
}

/* type styles (Cybersphere names; caps styles need text-transform) */
.display-xl{font:700 96px/90px var(--font-display);letter-spacing:-.01em;text-transform:uppercase}
.display-l{font:700 64px/60px var(--font-display);letter-spacing:-.005em;text-transform:uppercase}
.heading-1{font:700 48px/48px var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.heading-2{font:700 36px/38px var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.heading-3{font:700 24px/28px var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.subhead{font:400 20px/28px var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.eyebrow{font:700 13px/16px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.button{font:700 14px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.label{font:400 12px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.micro{font:400 10px/12px var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.stat-l{font:400 72px/72px var(--font-display);letter-spacing:-.01em}
.stat-m{font:400 40px/44px var(--font-display)}
.title-s{font:600 18px/26px var(--font-sans);letter-spacing:-.01em}
.body-l{font:400 18px/30px var(--font-sans)}
.body{font:400 16px/26px var(--font-sans)}
.body-s{font:400 14px/22px var(--font-sans)}
.caption{font:400 12px/18px var(--font-sans);letter-spacing:.01em}
.mono-label{font:500 12px/16px var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.mono-num{font:400 20px/24px var(--font-mono);letter-spacing:-.01em}