/*! PixelGif — © 2026 Swerve. All rights reserved. Proprietary; see LICENSE. */
/* PixelGif — standalone identity tokens.
   Cyber-noir base, shared STRUCTURALLY with the Swerve family (spacing /
   radius / type-scale / easing per brand-kit/tokens.css §6), but PixelGif
   keeps its OWN palette: electric cyan primary + magenta for active /
   selected / focus, teal reserved strictly for status.
   styles.css references THESE tokens — no raw literals. */
:root {
  color-scheme: dark;

  /* --- Base palette (layered dark for elevation, not flat #000) --- */
  --pg-bg:         #0d0f1a;   /* page background */
  --pg-bg-1:       #0a0c16;   /* deepest — hero + canvas well */
  --pg-surface:    #151926;   /* panels, cards */
  --pg-surface-2:  #1d2233;   /* elevated / hover surface */
  --pg-check-base: #10141f;   /* drawing-canvas checkerboard base (reveals transparent pixels) */
  --pg-check-sq:   #1a2030;   /* drawing-canvas checkerboard square */
  --pg-paper:      #ffffff;   /* white backing behind the exported-preview surface */
  --pg-text:       #e8edf6;
  --pg-muted:      #93a0b8;   /* secondary text */
  --pg-dim:        #64748b;   /* meta labels, section numbers */

  /* --- Accents (PixelGif identity) --- */
  --pg-accent:     #4cc9f0;   /* electric cyan — primary UI */
  --pg-accent-hi:  #7ad7f5;   /* cyan hover / gradient top */
  --pg-accent-2:   #f72585;   /* magenta — active / selected / focus */
  --pg-accent-2-hi:#ff5fa6;
  --pg-status:     #4dd2c0;   /* teal — STATUS ONLY (ready/encoding/done) */
  --pg-danger:     #ff5d6c;   /* destructive (reset, remove) */
  --pg-on-accent:  #04060d;   /* dark text on bright fills */

  /* --- Borders / focus --- */
  --pg-border:     rgba(255,255,255,0.08);
  --pg-border-hi:  rgba(76,201,240,0.45);    /* cyan active border */
  --pg-focus:      var(--pg-accent-2);        /* magenta focus ring */

  /* --- Glow (use SPARINGLY — focal / active elements only) --- */
  --pg-glow:       0 0 18px rgba(76,201,240,0.35);
  --pg-glow-2:     0 0 18px rgba(247,37,133,0.40);

  /* --- Shadows (depth, not glow) --- */
  --pg-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --pg-shadow-md:  0 8px 24px rgba(0,0,0,.45);
  --pg-shadow-lg:  0 20px 50px rgba(0,0,0,.55);

  /* --- Typography (Swerve family pairing) --- */
  --pg-font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pg-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pg-weight-display: 800;
  --pg-weight-bold:    700;
  --pg-weight-medium:  500;

  --pg-text-xs:   0.72rem;
  --pg-text-sm:   0.82rem;
  --pg-text-base: 1rem;
  --pg-text-lg:   1.15rem;
  --pg-text-xl:   1.5rem;
  --pg-text-2xl:  clamp(1.8rem, 4vw, 2.6rem);
  --pg-text-3xl:  clamp(2.2rem, 6vw, 3.4rem);
  --pg-tracking-label: 0.16em;   /* mono uppercase labels */

  /* --- Spacing (4px base) --- */
  --pg-space-1: .25rem; --pg-space-2: .5rem;  --pg-space-3: .75rem;
  --pg-space-4: 1rem;   --pg-space-6: 1.5rem; --pg-space-8: 2rem;
  --pg-space-12: 3rem;

  /* --- Responsive (keep --pg-bp-mobile in lockstep with the @media literal
         in styles.css; --pg-touch-target is the min comfortable tap size) --- */
  --pg-bp-mobile: 768px;
  --pg-touch-target: 44px;

  /* --- Radius --- */
  --pg-radius-sm: 6px;
  --pg-radius:    12px;
  --pg-radius-md: 14px;
  --pg-radius-lg: 18px;
  --pg-radius-full: 999px;

  /* --- Motion (one signature curve) --- */
  --pg-ease: cubic-bezier(.2,.7,.2,1);
  --pg-dur:  180ms;
  --pg-dur-slow: 320ms;

  /* --- Layout --- */
  --pg-container: 1120px;
  --pg-app-bar-h: 4rem;   /* sticky navbar height; m6 measures the real navbar
                             (the tagline wraps to 2 lines on narrow mobile, so it
                             is taller than 4rem there) and overwrites this, so the
                             pinned mobile canvas clears it instead of being clipped */
  /* Mobile bottom dock: the tab-bar + the persistent playback bar that sits just
     above it. The tab-bar formula matches its CSS (touch target + padding + safe
     area); the playback bar is a fixed-height slim strip. The sheet's bottom and
     the content padding clear both so nothing hides behind the dock. */
  --pg-tabbar-h: calc(var(--pg-touch-target) + var(--pg-space-1) + max(var(--pg-space-1), env(safe-area-inset-bottom, 0px)) + 1px);
  --pg-playbar-h: 3.4rem;

  /* --- Z-index ladder (single source for the stacking order; styles.css
         uses ONLY these — no bare integers). canvas-pin > sheet so the pinned
         canvas stays drawable when they overlap on short viewports (C2). --- */
  --pg-z-fx-overlay: 4;    /* effect preview overlay (inside canvas wrapper) */
  --pg-z-hint: 5;          /* drag-drop hint */
  --pg-z-sidebar-r: 9;     /* desktop right sidebar */
  --pg-z-sidebar-l: 10;    /* desktop left sidebar */
  --pg-z-sticky: 11;       /* sticky headers inside sidebars */
  --pg-z-scrim: 48;        /* C2 sheet backdrop */
  --pg-z-sheet: 49;        /* C2 bottom sheet */
  --pg-z-canvas-pin: 51;   /* C2 pinned canvas — beats sheet + scrim */
  --pg-z-tabbar: 52;       /* C2 mobile tab-bar */
  --pg-z-header: 100;      /* app navbar */
  --pg-z-modal: 1000;      /* confirmation dialog */
}