/* ============================================================
   GRAFICA GROUP — Brand Design System
   Reusable stylesheet for all branded HTML documentation.
   Outfit is SELF-HOSTED below — ship `fonts/Outfit-variable.woff`
   (from assets/fonts/, regenerate with scripts/subset_fonts.py) in a
   `fonts/` dir next to this stylesheet. No Google Fonts request needed.
   ============================================================ */

@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/Outfit-variable.woff") format("woff");
}

:root{
  /* Brand colours (fixed — never change these hex values) */
  --gcg-blue:#0174E7;         /* primary   · RGB 1 116 231   · CMYK 100 50 0 9 */
  --gcg-violet:#903DFF;       /* secondary · RGB 144 61 255  · CMYK 44 76 0 0 */
  --gcg-ink:#000000;          /* background primary */
  --gcg-white:#FFFFFF;        /* text primary */

  /* Signature gradient — the through-line of the brand */
  --gcg-grad:linear-gradient(118deg,var(--gcg-blue) 0%,var(--gcg-violet) 100%);
  --gcg-grad-soft:linear-gradient(118deg,rgba(1,116,231,.16),rgba(144,61,255,.16));

  /* Derived neutrals (support only — keep base in black & white) */
  --gcg-panel:#0a0a0d;
  --gcg-panel-2:#101016;
  --gcg-panel-3:#16161e;
  --gcg-line:rgba(255,255,255,.09);
  --gcg-line-2:rgba(255,255,255,.16);
  --gcg-muted:#7d7d88;
  --gcg-muted-2:#b9b9c4;

  /* Light-mode neutrals (for the optional light variant) */
  --gcg-paper:#ffffff;
  --gcg-paper-2:#f5f5f7;
  --gcg-ink-2:#1a1a20;
  --gcg-line-light:rgba(0,0,0,.10);
  --gcg-muted-light:#6a6a75;

  --gcg-font:'Outfit','Poppins',system-ui,-apple-system,sans-serif;
  --gcg-radius:18px;
  --gcg-maxw:1180px;
  --gcg-pad:clamp(22px,6vw,120px);

  --gcg-ok:#39d98a;
  --gcg-bad:#ff5a5a;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--gcg-ink);color:var(--gcg-white);
  font-family:var(--gcg-font);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  text-wrap:pretty;text-wrap-style:pretty;
}
body.gcg-light{background:var(--gcg-paper);color:var(--gcg-ink-2)}
::selection{background:var(--gcg-violet);color:#fff}

/* ---------- layout ---------- */
.gcg-wrap{max-width:var(--gcg-maxw);margin:0 auto;padding:0 var(--gcg-pad)}
.gcg-section{position:relative;padding:clamp(72px,12vh,150px) 0;border-top:1px solid var(--gcg-line)}
.gcg-section:first-of-type{border-top:none}
body.gcg-light .gcg-section{border-color:var(--gcg-line-light)}

/* ---------- text on gradient ---------- */
.gcg-gradient-text{background:var(--gcg-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- eyebrow / labels ---------- */
.gcg-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gcg-muted-2)}
.gcg-eyebrow::before{content:"";width:26px;height:2px;background:var(--gcg-grad);border-radius:2px}
.gcg-label{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gcg-muted)}

/* ---------- chapter / section numbering ---------- */
.gcg-chapno{font-size:clamp(46px,9vw,104px);font-weight:800;line-height:.9;letter-spacing:-.04em;
  background:var(--gcg-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}

/* ---------- headings & body ---------- */
.gcg-h1{font-size:clamp(30px,5.2vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.gcg-h2{font-size:clamp(24px,3.4vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.gcg-h3{font-size:22px;font-weight:500}
.gcg-lead{font-size:clamp(16px,1.7vw,20px);color:var(--gcg-muted-2);font-weight:300;max-width:62ch;line-height:1.7}
body.gcg-light .gcg-lead{color:var(--gcg-muted-light)}
.gcg-manifesto{font-size:clamp(24px,3.4vw,40px);font-weight:300;line-height:1.32;letter-spacing:-.015em;max-width:22ch}
.gcg-manifesto b{font-weight:600}

/* ---------- cards ---------- */
.gcg-grid{display:grid;gap:22px}
.gcg-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.gcg-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.gcg-grid.cols-auto{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media(max-width:820px){.gcg-grid.cols-2,.gcg-grid.cols-3{grid-template-columns:1fr}}

.gcg-card{background:var(--gcg-panel);border:1px solid var(--gcg-line);border-radius:var(--gcg-radius);
  padding:clamp(22px,3vw,34px);position:relative;overflow:hidden}
body.gcg-light .gcg-card{background:var(--gcg-paper-2);border-color:var(--gcg-line-light)}
.gcg-card.accent::after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--gcg-grad)}
.gcg-card h3{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gcg-muted);margin-bottom:12px}
.gcg-card p{color:var(--gcg-muted-2);font-size:15.5px}
body.gcg-light .gcg-card p{color:var(--gcg-muted-light)}

/* ---------- chips ---------- */
.gcg-chips{display:flex;flex-wrap:wrap;gap:12px}
.gcg-chip{border:1px solid var(--gcg-line-2);border-radius:100px;padding:11px 20px;font-size:14px;color:var(--gcg-muted-2)}
.gcg-chip b{color:#fff;font-weight:600}
body.gcg-light .gcg-chip{border-color:var(--gcg-line-light)}
body.gcg-light .gcg-chip b{color:var(--gcg-ink)}

/* ---------- gradient rule & buttons ---------- */
.gcg-rule{height:3px;background:var(--gcg-grad);border-radius:3px;border:none}
.gcg-btn{display:inline-block;border:1px solid var(--gcg-line-2);border-radius:100px;padding:12px 22px;
  font-size:14px;color:#fff;text-decoration:none;transition:.3s;font-weight:400;cursor:pointer}
.gcg-btn:hover{background:var(--gcg-grad);border-color:transparent}
.gcg-btn.solid{background:var(--gcg-grad);border-color:transparent}

/* ---------- logo plates (for showcasing logos) ---------- */
.gcg-plate{border-radius:var(--gcg-radius);padding:clamp(30px,5vw,60px);display:flex;align-items:center;
  justify-content:center;min-height:200px;border:1px solid var(--gcg-line)}
.gcg-plate.dark{background:radial-gradient(120% 120% at 30% 0%,#141420,#050507)}
.gcg-plate.light{background:#f5f5f7}
.gcg-plate.grad{background:var(--gcg-grad)}
.gcg-plate img{max-width:80%;max-height:130px;height:auto;display:block}

/* ---------- swatches (interactive colour tokens) ---------- */
.gcg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gcg-sw{border:1px solid var(--gcg-line);border-radius:var(--gcg-radius);overflow:hidden;background:var(--gcg-panel)}
.gcg-sw .fill{height:140px}
.gcg-sw .info{padding:18px 20px}
.gcg-sw .nm{font-size:16px;font-weight:600}
.gcg-sw .vals{margin-top:12px;font-size:12.5px;color:var(--gcg-muted-2);font-variant-numeric:tabular-nums;line-height:1.7}

/* ---------- app icons ---------- */
.gcg-appicons{display:flex;gap:22px;flex-wrap:wrap}
.gcg-appicons img{width:118px;height:118px;border-radius:26px;display:block;box-shadow:0 16px 40px rgba(0,0,0,.5)}

/* ---------- reveal on scroll (pair with gcg-brand.js) ---------- */
.gcg-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.gcg-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.gcg-reveal{opacity:1;transform:none;transition:none}}

/* ---------- ambient gradient glow (hero backgrounds) ---------- */
.gcg-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gcg-glow::before,.gcg-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.gcg-glow::before{width:52vw;height:52vw;left:-8vw;top:-6vw;background:radial-gradient(circle,rgba(1,116,231,.55),transparent 65%)}
.gcg-glow::after{width:46vw;height:46vw;right:-6vw;bottom:-10vw;background:radial-gradient(circle,rgba(144,61,255,.55),transparent 65%)}

/* ---------- print (Save as PDF keeps real Outfit) ---------- */
@media print{
  body{background:#fff;color:#000}
  .gcg-section{padding:24px 0;border:none;break-inside:avoid}
  .gcg-glow,.gcg-reveal{opacity:1 !important;transform:none !important}
}