/* =====================================================
   TRANSLUCID - Global Design Tokens & Shared Components
   ===================================================== */

/* -- Design Tokens -- */
:root{
  /* Layout */
  --margin-x: clamp(16px,8vw,162px);

  /* Brand backgrounds */
  --bg: #07090c;
  --bg-card: #0c0f14;
  --bg-surface: #0e1117;

  /* Typography — change these to restyle ALL text site-wide */
  --text-primary: rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.75);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-dim: rgba(255, 254, 254, 0.35);

  /* Accent — change these to re-theme the entire site */
  --accent: #3ebeff;
  --accent-bg: rgba(62,190,255,.12);
  --accent-hover: rgba(62,190,255,.22);
  --accent-border: rgba(62,190,255,.5);

  /* Danger / red — threat indicators, errors */
  --danger: #ff4757;
  --danger-bg: rgba(255,71,87,.15);
  --danger-border: rgba(255,71,87,.3);

  /* Success / green — status lights, active indicators */
  --success: #4ade80;
  --success-bg: rgba(74,222,128,.15);

  /* Warning / yellow */
  --warning: #ffd93d;
  --warning-bg: rgba(255,217,61,.08);

  /* Borders */
  --border-subtle: rgba(255,255,255,.04);
  --border-light: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.06);

  /* Glass effect */
  --glass: rgba(22,22,28,.78);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur: blur(40px) saturate(180%);

  /* Code syntax — change to restyle all code blocks */
  --syntax-keyword: #b084d0;
  --syntax-function: #7a9ccc;
  --syntax-string: #576453;
  --syntax-number: #a25e47;
  --syntax-param: #a36f37;

  /* Logo — heights used by nav and footer */
  --logo-height: 28px;

  /* Assets — centralised paths (change here to rebrand) */
  --logo-icon: url('../assets/images/logo-icon.png');
  --logo-text: url('../assets/images/logo-text.png');
  --logo-full: url('../assets/images/logo-full.png');
}

/* -- Reset -- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
body{background:var(--bg);font-family:'Inter',system-ui,sans-serif;color:var(--text-primary);padding:0 var(--margin-x)}

/* -- Shared Components -- */
.tag{font-size:clamp(8px,1.4vw,10px);letter-spacing:clamp(2px,0.5vw,4px);color:var(--accent);text-transform:uppercase;margin-bottom:clamp(16px,3vw,26px);display:block}
.section-stage-label{font-size:clamp(9px,1.5vw,11px);letter-spacing:clamp(2px,0.5vw,4px);color:var(--accent);text-transform:uppercase;text-align:center;display:block;margin:0 auto clamp(20px,4vw,30px)}
.section-stage-label.global-center{position:absolute;top:34px;left:50%;transform:translateX(-50%);margin:0;z-index:12}
.btn{padding:13px 30px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .25s;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.3px;border:1px solid var(--text-muted);background:transparent;color:var(--text-secondary);font-weight:500}
.btn:hover{border-color:var(--accent-border);color:var(--accent)}
.btn-primary{padding:12px 28px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .25s;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.3px;border:1px solid var(--accent);background:var(--accent-bg);color:var(--text-primary);font-weight:500}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 20px var(--accent-bg)}
.btn-outline{padding:12px 28px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .25s;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.3px;border:1px solid var(--text-muted);background:transparent;color:var(--text-secondary);font-weight:500}
.btn-outline:hover{border-color:var(--accent-border);color:var(--accent)}