/*
 * Home V3 — Global tokens & shared utilities
 * Loaded for all home-v3 components.
 */

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── Material Symbols rendering ─────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* ── Design-token overrides for this child theme ─────────────── */
:root {
  --color-brand-primary:           #cebdff;
  --color-brand-secondary:         #6adc9a;
  --color-brand-accent:            #71d5e6;
  --color-brand-primary-container: #815ceb;

  --color-surface-primary:         #11131b;
  --color-surface-secondary:       #1d1f27;
  --color-surface-tertiary:        #282a32;
  --color-surface-lowest:          #0c0e15;
  --color-surface-low:             #191b23;
  --color-surface-highest:         #33343d;

  --color-text-primary:            #e1e1ed;
  --color-text-secondary:          #cac3d6;
  --color-text-inverse:            #11131b;

  --color-border-default:          #948ea0;
  --color-border-subtle:           #494454;

  --font-family-heading:           'Space Grotesk', sans-serif;
  --font-family-body:              'Inter', sans-serif;

  /* Cipher gradient */
  --hv3-gradient: linear-gradient(135deg, #cebdff 0%, #815ceb 100%);

  /* Glow effects */
  --hv3-glow-purple:  0 0 32px rgba(129, 92, 235, 0.15);
  --hv3-glow-cyan:    0 0 12px rgba(113, 213, 230, 0.4);
  --hv3-glow-green:   0 0 12px #6adc9a;
}

/* ── Page base ───────────────────────────────────────────────── */
body {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
}

.home-v3-main {
  padding-top: 80px; /* nav height */
}

/* ── Shared button ───────────────────────────────────────────── */
.hv3-btn {
  display: inline-block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-normal), filter var(--transition-normal);
  border: none;
}

.hv3-btn--gradient {
  background: var(--hv3-gradient);
  color: var(--color-text-inverse);
}

.hv3-btn--gradient:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.hv3-btn--sm  { padding: 0.375rem 1.25rem; font-size: var(--font-size-sm); }
.hv3-btn--md  { padding: 0.5rem  1.5rem;   font-size: var(--font-size-base); }
.hv3-btn--lg  { padding: 1rem    2.5rem;   font-size: var(--font-size-lg); box-shadow: var(--shadow-lg); }

/* ── Eyebrow label ───────────────────────────────────────────── */
.hv3-eyebrow {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hv3-eyebrow--tertiary { color: var(--color-brand-accent); }

/* ── Badge ───────────────────────────────────────────────────── */
.hv3-badge {
  display: inline-block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hv3-badge--secondary {
  background: rgba(106, 220, 154, 0.2);
  color: var(--color-brand-secondary);
}
.hv3-badge--tertiary {
  background: rgba(113, 213, 230, 0.2);
  color: var(--color-brand-accent);
}