/* ============================================================================
   gg-theme.css  —  the GG design language (jumpcut.GG / bitcrush.GG / …)
   Design tokens + base element styling + shared "chrome" component classes.
   Load AFTER fonts/fonts.css. Product-specific UI lives in each app, not here.
   ============================================================================ */

:root {
  color-scheme: dark;
  /* surfaces */
  --bg:#16181d; --panel:#121419; --well:#0e0f12;
  --card:#1c1f26; --card-sel:#20242c; --chip:#1d2027;
  --control:#20242a; --inset:#15171c;
  /* --raise = the INTERACTIVE surface (buttons). Contrast law: it must sit a
     clear step ABOVE --card so a filled control never blends into the card it
     lives on. Every theme overrides this; never let it equal --card. */
  --raise:#2a2f38; --raise-hi:#343b45;
  --border:rgba(255,255,255,.08); --divider:rgba(255,255,255,.07);
  /* text */
  --text:#e4e7ec; --text2:#a6abb4; --muted:#6e737c; --faint:#5f646d;
  /* accents */
  --lime:#ff8a2e; --on-lime:#2a1200; --lime-dark:#b35810; --lime-rgb:255,138,46;
  --accent2:#4f8ff5; --frame-blue:var(--accent2); --frame-rgb:90,160,255;
  --danger:#e0584f; --on-danger:#2a0806; --danger-hi:#ed6a60; --warn:#f2683c;
  /* type */
  --f-head:'Space Grotesk',system-ui,sans-serif;
  --f-gg:'Outfit',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  /* metrics */
  /* THREE RADII (DESIGN-2.0-PLAN.md): sm for bars, chips, swatches; the plain one for
     controls, rows, fields; lg for panels, dialogs, menus. A corner radius in a stylesheet
     is one of these, or a pill / circle (999px, 50%). */
  --head-h:46px; --radius-sm:3px; --radius:8px; --radius-lg:12px; --ctl-h:30px;
}

/* ---- base elements ---- */
* { box-sizing:border-box; }
/* THE TYPE SCALE (DESIGN-2.0-PLAN.md). Five sizes for the interface, one for reading
   text, one for a screen's heading. A font size in a stylesheet is one of these tokens;
   tools/preflight.py's `scale` check refuses a raw px size. */
/* IDENTITY HUES (DESIGN-2.0-PLAN.md): six, for telling clips, layers and marks apart. Full
   strength as a swatch or a mark; mixed toward the surface when it is a fill. They are
   not states: coral as a STATE is --lime, and red as a warning is --danger. */
:root { --hue-coral:#ff8a2e; --hue-amber:#f2c94c; --hue-sky:#6ec1e4; --hue-green:#7ecf9c;
        --hue-violet:#a98df0; --hue-rose:#e8776b; }
:root { --fs-label:10px; --fs-data:11px; --fs-control:12px; --fs-body:13px; --fs-title:15px;
        --fs-read:14px; --fs-head:22px; }
body { margin:0; background:var(--bg); color:var(--text); font:var(--fs-body)/1.5 var(--f-body); }
h1,h2,h3,h4 { font-family:var(--f-head); }

/* The button SYSTEM (button / .gg-btn + variants) lives in gg-components.css so
   it stays one source of truth for every GG app. Load gg-components.css AFTER
   this file and BEFORE any theme override. */

/* text-like inputs only; range/checkbox are styled separately below.
   Borderless by design: the tonal surface step (--inset well on a panel) IS the
   field boundary. Focus = accent ring, nothing at rest. */
select, input:not([type="range"]):not([type="checkbox"]) {
         background:var(--inset); color:var(--text); min-height:var(--ctl-h,30px); box-sizing:border-box;
         border:none; border-radius:var(--radius,5px); padding:4px 8px; }
select:focus-visible, input:not([type="range"]):not([type="checkbox"]):focus-visible {
         outline:none; box-shadow:0 0 0 2px rgba(var(--lime-rgb),.4); }

/* ---- branded form controls (native-backed; behavior stays native) ---- */
/* range: lime fill driven by --rng (set by gg-ui.js) + a neutral dot thumb.
   The unfilled track is --rng-track — light skins (win95/winxp) MUST override it;
   the default 13% white vanishes on light panels. */
input[type=range] { -webkit-appearance:none; appearance:none; height:3px; padding:0; border:none; border-radius:var(--radius-sm,3px);
  outline:none; cursor:default;
  background:linear-gradient(90deg, var(--lime) var(--rng,0%), var(--rng-track, rgba(255,255,255,.13)) var(--rng,0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;
  background:#c6cbd2; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.4); cursor:default; transition:box-shadow .12s; }
input[type=range]:hover::-webkit-slider-thumb { box-shadow:0 1px 5px rgba(0,0,0,.5); }
input[type=range]:active::-webkit-slider-thumb { box-shadow:0 1px 6px rgba(0,0,0,.55); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#c6cbd2; box-shadow:0 1px 3px rgba(0,0,0,.4); cursor:default; }
/* checkbox: rounded box, lime when checked, CSS checkmark (state is native) */
input[type=checkbox] { -webkit-appearance:none; appearance:none; width:16px; height:16px; flex:0 0 auto; position:relative;
  border:1px solid var(--border); border-radius:var(--radius,5px); background:var(--inset); cursor:default; vertical-align:middle;
  transition:background .12s, border-color .12s; }
input[type=checkbox]:hover { background:var(--control); }
input[type=checkbox]:checked { background:var(--lime); }
input[type=checkbox]:checked::after { content:""; position:absolute; left:4.5px; top:1px; width:4px; height:8px;
  border:solid var(--on-lime); border-width:0 2px 2px 0; transform:rotate(45deg); }
input[type=checkbox]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(var(--lime-rgb),.25); }

/* ---- scrollbars (themeable; skins can override the pieces) ---- */
* { scrollbar-color:var(--control) transparent; scrollbar-width:thin; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:var(--well); }
::-webkit-scrollbar-thumb { background:var(--control); border:3px solid var(--well); border-radius:var(--radius-lg,9px); }
::-webkit-scrollbar-thumb:hover { background:var(--chip); }
::-webkit-scrollbar-corner { background:var(--well); }

/* ---- progress bar (themeable) ---- */
progress { -webkit-appearance:none; appearance:none; width:120px; height:14px; border:none;
           border-radius:var(--radius-lg,9px); background:var(--inset); overflow:hidden; vertical-align:middle; }
progress::-webkit-progress-bar { background:var(--inset); border-radius:var(--radius-lg,9px); }
progress::-webkit-progress-value { background:var(--lime); border-radius:var(--radius-lg,9px); }
progress::-moz-progress-bar { background:var(--lime); border-radius:var(--radius-lg,9px); }

/* ---- utility chrome bits ---- */
.gg-mono { font-family:var(--f-mono); }
.gg-grow { flex:1 1 auto; }
.gg-muted { color:var(--muted); }

/* pill button (header import/save/load style) */
.gg-pill { background:var(--control); border:none; border-radius:999px;
           padding:6px 15px; font-family:var(--f-mono); font-size:var(--fs-data); letter-spacing:.08em;
           text-transform:uppercase; color:var(--text2); cursor:default; box-shadow:none; }
.gg-pill:hover { color:var(--text); background:var(--raise-hi); }

/* primary top-bar action button (e.g. Render / Generate / Export) */
.gg-cut { height:34px; padding:0 16px; border-radius:var(--radius-lg,9px); font-family:var(--f-head);
          font-weight:600; font-size:var(--fs-body); background:var(--lime); color:var(--on-lime); border:1px solid var(--lime); }
.gg-cut:hover { background:color-mix(in srgb, var(--lime) 82%, #fff); }
/* warm "cancel/back" variant of a top-bar action (needs button. to outrank .primary) */
button.gg-cancel { background:var(--warn); color:#1f0d06; border-color:var(--warn); }
button.gg-cancel:hover { background:color-mix(in srgb, var(--warn) 85%, #fff); }

.gg-badge { background:var(--chip); color:var(--text2); font-family:var(--f-mono);
            font-size:var(--fs-data); padding:1px 6px; border-radius:var(--radius-lg,9px); }

/* ---- app shell ---- */
.gg-app { display:flex; flex-direction:column; height:100vh; min-height:0; }
.gg-header { background:var(--well);
             padding:10px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; flex:0 0 auto; }

/* unified panel header (same height/title/flush collapse across panels) */
.gg-panel-head { display:flex; align-items:center; gap:10px; height:var(--head-h); min-height:var(--head-h);
                 padding:0 0 0 14px; background:var(--panel); flex:0 0 auto; }
.gg-panel-title { font-family:var(--f-head); font-weight:700; font-size:var(--fs-title); color:var(--text); white-space:nowrap; margin:0; }
.gg-collapse, .gg-rail-exp { --gg-icon-size:15px; }   /* their chevron is a drawn icon */
.gg-collapse { height:100%; width:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center;
               background:transparent; border:none; border-radius:0; padding:0; box-shadow:none;
               color:var(--text2); font-size:var(--fs-body); cursor:default; }
.gg-collapse:hover { color:var(--text); background:rgba(255,255,255,.06); }

/* collapsed-panel rail + expand button (pairs with .gg-collapse) */
.gg-rail { display:none; flex-direction:column; align-items:center; gap:12px; padding:12px 0; width:46px; flex:0 0 46px; }
.gg-rail-exp { background:transparent; border:none; box-shadow:none; border-radius:var(--radius,5px); color:var(--text2); padding:4px 7px; cursor:default; }
.gg-rail-exp:hover { background:rgba(255,255,255,.06); color:var(--text); }
.gg-rail-label { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-mono);
                 font-size:var(--fs-data); letter-spacing:.18em; text-transform:uppercase; color:var(--text2); }

/* draggable divider. z-index: a squeezed panel's overflowing content must
   never eat the gutter's pointer events (Both mode, narrow windows). */
.gg-gutter { flex:0 0 6px; cursor:col-resize; background:var(--well); align-self:stretch; touch-action:none;
             position:relative; z-index:5; transition:background .12s; }
.gg-gutter.h { cursor:row-resize; }
.gg-gutter:hover, .gg-gutter.dragging { background:var(--lime); }

/* ---- status bar (footer) ---- */
.gg-statusbar { flex:0 0 30px; display:flex; align-items:center; gap:8px; padding:0 14px;
                background:var(--panel);
                font-family:var(--f-mono); font-size:var(--fs-data); color:var(--text2); }
.gg-statusbar .sep { color:var(--faint); }
/* statusbar links: products style their own (jumpcut uses .sb-link) */

/* ---- modal overlay + card ---- */
.gg-overlay { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
              background:rgba(8,9,11,.66); backdrop-filter:blur(3px); }
.gg-overlay.show { display:flex; }
/* tighter, grounded shadow (not the floaty 70px soft glow every AI mock ships) */
.gg-card { width:480px; max-width:92vw; background:var(--panel); border:none;
           border-radius:var(--radius-lg,12px); padding:22px;
           box-shadow:0 2px 6px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.45); }

/* ---- logo lockup (wordmark + tile) ---- */
.gg-logo { display:inline-flex; align-items:center; gap:9px; }
.gg-logo .gg-word { font-family:var(--f-head); font-weight:700; font-size:18px; color:var(--text); letter-spacing:-.01em; line-height:1; }
.gg-logo .gg-word b { font-family:var(--f-gg); font-weight:700; color:var(--lime); }
.gg-tile { position:relative; width:30px; height:30px; border-radius:var(--radius-lg,9px); background:var(--lime);
           overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.gg-tile .gg-tile-letter { font-family:var(--f-gg); font-weight:700; font-size:19px; color:#0a0b0d; line-height:1; text-transform:lowercase; }
.gg-logo.big { transform:scale(2.1); transform-origin:center; }

/* ---- splash / landing scaffold ---- */
.gg-splash-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.gg-splash-tag { font-size:var(--fs-body); color:var(--muted); letter-spacing:.02em; }
.gg-dots { display:flex; gap:6px; }
.gg-dots i { width:7px; height:7px; border-radius:50%; background:#3a3f48; animation:gg-pulse 1.1s ease-in-out infinite; }
.gg-dots i:nth-child(2){ animation-delay:.18s; } .gg-dots i:nth-child(3){ animation-delay:.36s; }
@keyframes gg-pulse { 0%,100%{ background:#3a3f48; transform:scale(1); } 50%{ background:var(--lime); transform:scale(1.25); } }