/* opal — token skin, scoped to [data-theme="opal"] (theme scope). Consumes base.css + foundations token API. */

[data-theme="opal"] { --bg: #FFFFFF;
  --bg-alt: #F7F6FC;
  --bg-dark: #241F33;
  --surface: #FFFFFF;
  --ink: #241F33;
  --ink-inverse: #F8F6FF;
  --text-body: #241F33;
  --muted: #6B6480;
  --accent: #6552E0;              
  --accent-hover: #5343C4;
  --accent-tint: #EFEBFC;
  --accent-2: #2E9FBF;            
  --line: #E7E4F2;
  --mint: #DFF3EA;                

  
  --grad: linear-gradient(120deg, #6552E0 0%, #2E9FBF 55%, #E879B9 100%); /* @kind color */
  --grad-deep: linear-gradient(120deg, #4D3BC4 0%, #1F7E9A 55%, #C4548F 100%); /* @kind color */

  
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-utility: 'Figtree', system-ui, sans-serif;
  --display-weight: 700;
  --fs-h1: clamp(2.5rem, 5.5vw, 3.75rem); /* @kind font */
  --fs-h2: clamp(1.875rem, 3.5vw, 2.5rem); /* @kind font */
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.7; /* @kind font */

  
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-btn: var(--radius-pill);
  --shadow: 0 12px 32px rgba(101, 82, 224, 0.10);
  --speed: 200ms; /* @kind other */
  --ease: cubic-bezier(0.34, 1.3, 0.64, 1); /* @kind other */
  --input-bg: var(--bg-alt); }

[data-theme="opal"] .grad-word { background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }

[data-theme="opal"] .btn-primary { background: var(--grad); color: #FFFFFF; }

[data-theme="opal"] .btn-primary:hover { filter: saturate(1.15); background: var(--grad); }

[data-theme="opal"] .btn-secondary { border: 1.5px solid var(--accent); color: var(--accent); }

[data-theme="opal"] .orb { position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.12;
  background: var(--grad);
  pointer-events: none; z-index: 0; }

[data-theme="opal"] .has-orbs { position: relative; overflow: hidden; }

[data-theme="opal"] .has-orbs > :not(.orb) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  [data-theme="opal"] .orb { animation: orb-drift 30s ease-in-out infinite alternate; }
@keyframes orb-drift { to { transform: translate(6%, -4%) scale(1.06); } }
}

[data-theme="opal"] .card { border: 1.5px solid var(--line); }

[data-theme="opal"] .card:hover { border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  transform: translateY(-3px); }

[data-theme="opal"] .tint-1 { background: var(--accent-tint); }

[data-theme="opal"] .tint-2 { background: #E4F4F9; }

[data-theme="opal"] .tint-3 { background: #FCE9F3; }

[data-theme="opal"] .tint-4 { background: var(--mint); }

[data-theme="opal"] .site-header { position: sticky; top: 12px;
  margin-inline: var(--gutter);
  border: none; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); }

[data-theme="opal"] .band.grad { background: var(--grad-deep); color: #FFFFFF; }

[data-theme="opal"] .band.grad h2 { color: #FFFFFF; }

[data-theme="opal"] .rule-grad { height: 2px; border: 0; background: var(--grad); }

[data-theme="opal"] .site-footer { background: var(--bg-dark); color: var(--ink-inverse); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 2px solid transparent; background-clip: padding-box; }