/* Glacien design tokens — ported from the approved Solution Studio design handoff.
 * Source: design_handoff_solution_studio/design_system/_ds/…/tokens/*.css + base.css
 * Project rule: no .eyebrow kickers and no two-colour/italic-accent headings in
 * product UI (PROJECT_RULES.md) — the eyebrow/em helpers are deliberately omitted.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  /* accent — the only accent in the system */
  --accent:      #8B5CF6;
  --accent-600:  #7C3AED;
  --accent-700:  #6D28D9;
  --accent-200:  #DDD6FE;
  --accent-100:  #EDE9FE;
  --accent-050:  #F5F3FF;

  /* light surfaces (cream paper) */
  --bg:        #FBFAF8;
  --surface:   #FFFFFF;
  --surface-2: #F6F5F2;
  --line:      #E7E5E0;
  --line-2:    #D7D4CE;
  --ink:       #111013;
  --ink-2:     #3B3A41;
  --ink-3:     #6B6A72;
  --ink-4:     #9A99A1;

  /* dark slab (ink violet) */
  --dark-bg:      #0A0812;
  --dark-bg-2:    #0F0C1A;
  --dark-surface: #14101E;
  --dark-line:    rgba(255,255,255,0.08);
  --dark-line-2:  rgba(255,255,255,0.14);
  --dark-ink:     #FAFAFA;
  --dark-ink-2:   #C8C6D0;
  --dark-ink-3:   #8B8895;

  /* status (demo platforms + status chips) */
  --ok:       #34C0A8;
  --warn:     #E0A63A;
  --critical: #F0567A;

  /* families */
  --f-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-serif: 'Source Serif 4', Georgia, serif;
  --f-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* radii — the only radii in the system */
  --r-button: 10px;
  --r-tile:   12px;
  --r-card:   14px;
  --r-group:  18px;
  --r-pill:   999px;

  /* shadows — three only */
  --shadow-cta:      0 8px 24px rgba(139,92,246,0.35);
  --shadow-card:     0 24px 48px rgba(16,15,20,0.07);
  --shadow-dropdown: 0 40px 80px rgba(10,8,18,0.28), 0 12px 32px rgba(10,8,18,0.12);

  /* motion — one easing curve everywhere */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-hover:  140ms;
  --dur-move:   220ms;
  --dur-image:  500ms;
  --dur-reveal: 700ms;
}

::selection { background: var(--accent-200); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
}

h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 500; color: var(--ink); margin: 0; }
p { margin: 0; color: var(--ink-2); line-height: 1.6; }
strong { color: var(--ink); font-weight: 600; }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: inherit; }
input::placeholder { color: var(--ink-4); }
input:focus { outline: none; border-color: var(--accent); }

.on-dark, .on-dark p { color: var(--dark-ink-2); }
.on-dark strong { color: var(--dark-ink); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--dark-ink); }

/* mono taxonomy label */
.mono {
  font-family: var(--f-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-4);
}

/* mono key chip */
.key {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-3); padding: 5px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--bg);
}

/* italic serif pull-lead (accent left border) */
.pull-lead {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.3; color: var(--ink);
  padding-left: 24px; border-left: 2px solid var(--accent);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(17,16,19,.16); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes gl-pulse { 50% { box-shadow: 0 0 0 8px rgba(139,92,246,0); } }
@keyframes gl-fade  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

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