/* ═══════════════════════════════════════════════════════════════════
   GRAY-OS  ·  Gray Contrast house design system  ·  v2 (eclipse)
   Pitch-black + glowing orange + corona gradients + liquid glass.
   Ref: seacat.rossinavi.it (accent #ff7300, eclipse/corona, negative space)
        graycontrast.com (liquid glass: blur+saturate+brightness)
   PORTABLE: drop into any project, then a thin <project>-skin.css bridges
   legacy classes onto these --gc-* tokens.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Canvas: PITCH BLACK (Seacat is true black, depth comes from glow) ── */
  --gc-black:      #000000;
  --gc-bg:         #000000;   /* page canvas - pure black            */
  --gc-bg-2:       #050507;   /* faint lift for sunk areas           */
  --gc-surface:    #0a0b0d;   /* solid panel fallback (non-glass)    */
  --gc-surface-2:  #111316;
  --gc-surface-3:  #181a1f;

  /* ── Hairlines / glass edges ── */
  --gc-line:       rgba(255,255,255,0.07);
  --gc-line-2:     rgba(255,255,255,0.12);
  --gc-line-strong:rgba(255,255,255,0.20);

  /* ── Type: cool near-white → graphite ── */
  --gc-text:       #f4f5f7;
  --gc-text-2:     #a2a8b2;
  --gc-text-3:     #6a7078;
  --gc-text-faint: #41464e;

  /* ── THE accent: Seacat orange #ff7300, used WITH glow. ──
     Swap --gc-accent to retheme the whole house in one line. */
  --gc-accent:      #ff7300;
  --gc-accent-hi:   #ff9742;   /* hotter corona core / hover */
  --gc-accent-deep: #944300;   /* red-orange shadow edge      */
  --gc-accent-dim:  rgba(255,115,0,0.09);
  --gc-accent-line: rgba(255,115,0,0.45);
  --gc-on-accent:   #1a0c00;   /* near-black text on an orange fill */

  /* ── Cool counter-accent: the eclipse's steel-blue top + the "+" ── */
  --gc-cool:        #6e8ca8;
  --gc-cool-dim:    rgba(110,140,168,0.16);

  /* ── Status, desaturated (premium != neon). Referenced by skins + .gc-dense. ── */
  --gc-pos:         #8bb38a;   /* sage  */
  --gc-warn:        #cbab6a;   /* brass */
  --gc-neg:         #c08274;   /* clay  */
  --gc-info:        #8aa0b4;   /* steel */

  /* ── GLOW (the premium tell - bloom, not flat). ── */
  --gc-glow:        0 0 24px rgba(255,115,0,0.35);
  --gc-glow-strong: 0 0 40px rgba(255,115,0,0.45), 0 0 12px rgba(255,151,66,0.5);
  --gc-glow-soft:   0 0 18px rgba(255,115,0,0.22);
  --gc-text-glow:   0 0 18px rgba(255,115,0,0.45);
  --gc-cool-glow:   0 0 22px rgba(110,140,168,0.35);

  /* ── GRADIENTS (corona / eclipse). ── */
  --gc-grad-corona:  radial-gradient(120% 140% at 50% 120%, rgba(255,115,0,0.22) 0%, rgba(148,67,0,0.10) 30%, transparent 62%);
  --gc-grad-eclipse: linear-gradient(180deg, var(--gc-cool) 0%, #2a3744 38%, var(--gc-accent-deep) 82%, var(--gc-accent) 100%);
  --gc-grad-accent:  linear-gradient(135deg, var(--gc-accent) 0%, var(--gc-accent-deep) 100%);
  --gc-grad-sheen:   radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 55%);

  /* ── LIQUID GLASS (graycontrast.com: heavy blur + saturate + brightness). ── */
  --gc-glass-bg:    rgba(255,255,255,0.045);
  --gc-glass-bg-2:  rgba(255,255,255,0.07);
  --gc-glass-border:rgba(255,255,255,0.12);
  --gc-glass-filter:blur(18px) saturate(150%) brightness(1.06);
  --gc-glass-filter-strong:blur(34px) saturate(160%) brightness(1.05);
  --gc-glass-hi:    inset 0 1px 0 rgba(255,255,255,0.12);  /* top inner highlight */

  /* ── Type system ── */
  --gc-font:       'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gc-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gc-step--1:    0.78rem;  --gc-step-0: 0.94rem; --gc-step-1: 1.18rem;
  --gc-step-2:     1.6rem;   --gc-step-3: clamp(2rem,4vw,3rem); --gc-step-4: clamp(2.8rem,7vw,5.5rem);
  --gc-track-tight:-0.01em; --gc-track-wide:0.16em; --gc-track-xwide:0.3em;

  /* ── Space ── */
  --gc-1:4px; --gc-2:8px; --gc-3:12px; --gc-4:16px; --gc-5:24px; --gc-6:36px; --gc-7:56px; --gc-8:88px;

  /* ── Radius: glass panels get a soft radius; chips/btns smaller ── */
  --gc-r:    6px;
  --gc-r-2:  10px;
  --gc-r-glass: 16px;
  --gc-r-pill: 980px;

  /* ── Depth: soft black under glass ── */
  --gc-shadow:  0 18px 50px -28px rgba(0,0,0,0.92);
  --gc-shadow-hi:0 30px 70px -30px rgba(0,0,0,0.96);

  /* ── Motion ── */
  --gc-ease: cubic-bezier(0.22,1,0.36,1);
  --gc-fast:140ms; --gc-mid:300ms; --gc-slow:620ms;
}

.gc-reset *, .gc-reset *::before, .gc-reset *::after { box-sizing: border-box; }

/* Optional page atmosphere: pitch black + a faint corona bloom so glass refracts something.
   Apply .gc-atmosphere to <body> (or replicate via a project skin). */
.gc-atmosphere { background: var(--gc-bg); position: relative; }
.gc-atmosphere::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--gc-grad-corona), var(--gc-grad-sheen);
}

/* ═══ PRIMITIVES ═══ */

.gc-eyebrow { font-family:var(--gc-mono); font-size:var(--gc-step--1); letter-spacing:var(--gc-track-wide); text-transform:uppercase; color:var(--gc-text-3); }
.gc-rule { height:1px; border:0; background:var(--gc-line); }

/* scroll-progress bar (Seacat tell) - wire width via JS */
.gc-scroll-progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--gc-accent); box-shadow:var(--gc-glow-soft); z-index:9999; transition:width 80ms linear; }

/* LIQUID GLASS panel - the default surface (not flat, not a generic bubble) */
.gc-glass {
  position:relative;
  background:var(--gc-glass-bg);
  -webkit-backdrop-filter:var(--gc-glass-filter);
  backdrop-filter:var(--gc-glass-filter);
  border:1px solid var(--gc-glass-border);
  border-radius:var(--gc-r-glass);
  box-shadow:var(--gc-glass-hi), var(--gc-shadow);
}
.gc-glass:hover { background:var(--gc-glass-bg-2); border-color:var(--gc-line-2); }

.gc-panel { background:var(--gc-surface); border:1px solid var(--gc-line); border-radius:var(--gc-r-2); box-shadow:var(--gc-shadow); }

/* buttons */
.gc-btn {
  font-family:var(--gc-mono); font-size:var(--gc-step--1); letter-spacing:var(--gc-track-wide); text-transform:uppercase;
  padding:10px 20px; border-radius:var(--gc-r); border:1px solid var(--gc-line-2);
  background:var(--gc-glass-bg); color:var(--gc-text); cursor:pointer;
  -webkit-backdrop-filter:var(--gc-glass-filter); backdrop-filter:var(--gc-glass-filter);
  transition:border-color var(--gc-fast) var(--gc-ease), background var(--gc-fast) var(--gc-ease), box-shadow var(--gc-fast) var(--gc-ease), color var(--gc-fast) var(--gc-ease);
}
.gc-btn:hover { border-color:var(--gc-line-strong); background:var(--gc-glass-bg-2); }
.gc-btn-accent { border-color:var(--gc-accent-line); color:var(--gc-accent-hi); box-shadow:var(--gc-glow-soft); }
.gc-btn-accent:hover { background:var(--gc-grad-accent); color:var(--gc-on-accent); border-color:var(--gc-accent); box-shadow:var(--gc-glow); }

/* glow helpers */
.gc-glow { box-shadow:var(--gc-glow); }
.gc-accent-text { color:var(--gc-accent-hi); text-shadow:var(--gc-text-glow); }
.gc-cool-text { color:var(--gc-cool); }

/* ═══ DATA / DENSE MODE - calm + compact ledger (ashwingupta tell) ═══ */
.gc-dense { font-family:var(--gc-mono); font-size:var(--gc-step--1); line-height:1.45; color:var(--gc-text-2); }
.gc-dense table { width:100%; border-collapse:collapse; }
.gc-dense th { text-align:left; font-weight:500; letter-spacing:var(--gc-track-wide); text-transform:uppercase; font-size:0.72rem; color:var(--gc-text-3); padding:10px 14px; border-bottom:1px solid var(--gc-line-2); position:sticky; top:0; background:var(--gc-bg); }
.gc-dense td { padding:9px 14px; border-bottom:1px solid var(--gc-line); color:var(--gc-text); }
.gc-dense tr:hover td { background:rgba(255,255,255,0.03); }
.gc-dense td:first-child, .gc-dense th:first-child { padding-left:0; }

.gc-ledger { display:flex; flex-direction:column; }
.gc-ledger-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--gc-4); padding:12px 0; border-bottom:1px solid var(--gc-line); }
.gc-ledger-row:last-child { border-bottom:0; }
.gc-ledger-label { color:var(--gc-text-2); }
.gc-ledger-val { font-family:var(--gc-mono); color:var(--gc-text); font-variant-numeric:tabular-nums; }
.gc-ledger-val.is-key { color:var(--gc-accent-hi); text-shadow:var(--gc-text-glow); }

/* ═══ ICONS - Phosphor (vendored). NO EMOJI in chrome. ═══
   <i class="ph-light ph-sun" aria-hidden="true"></i> · inherits currentColor.
   Load phosphor.css before this file. */
[class*="ph-"], i[class^="ph"] { line-height:1; vertical-align:-0.125em; font-style:normal; letter-spacing:normal; }
.gc-ico { font-size:1.1em; color:var(--gc-text-2); }
.gc-ico-accent { color:var(--gc-accent); }
.gc-ico-lg { font-size:1.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}