/* =========================================================================
   Alveon Design System — Tokens
   White canvas · cool accent · signature gradient
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand & Accent ----------
     Iris — a cool electric indigo. Inviting, not corporate-blue, not Apple-blue.
     Pairs with Sky and Fuchsia to form the signature gradient. */
  --primary:           #4F5BFF;  /* Iris 600 — the single solid interactive color */
  --primary-hover:     #6470FF;  /* +6% brightness on hover */
  --primary-press:     #3D49E8;  /* darker pressed state */
  --primary-focus:     #6470FF;  /* keyboard focus ring */
  --primary-on-dark:   #8B96FF;  /* inline links on dark tiles */
  --primary-tint:      #ECEEFF;  /* soft fill for selected chips */

  /* Gradient stops — used as a triplet, never alone */
  --grad-sky:          #22D3EE;  /* cool cyan */
  --grad-iris:         #4F5BFF;  /* electric indigo */
  --grad-violet:       #A855F7;  /* warm violet (the inviting note) */
  --grad-fuchsia:      #EC4899;  /* signal pink */

  /* The signature gradient (diagonal) — applied to hero artwork only */
  --gradient-signal:   linear-gradient(135deg, #22D3EE 0%, #4F5BFF 45%, #A855F7 100%);
  --gradient-aurora:   linear-gradient(135deg, #4F5BFF 0%, #A855F7 50%, #EC4899 100%);
  --gradient-cool:     linear-gradient(135deg, #22D3EE 0%, #4F5BFF 100%);

  /* ---------- Surface ---------- */
  --canvas:                 #FFFFFF;  /* pure white — primary canvas */
  --canvas-soft:            #FBFBFD;  /* Apple-style near-white for alt sections */
  --canvas-mist:            #F5F5F7;  /* secondary tile, very cool off-white */
  --surface-pearl:          #F8F8FA;  /* button "pearl" surface */
  --surface-tile-1:         #0B0D17;  /* primary dark tile — cool inky blue-black */
  --surface-tile-2:         #111322;  /* lighter step (separates dark/dark) */
  --surface-tile-3:         #07080F;  /* darker step (footer of stack) */
  --surface-black:          #000000;  /* nav bar, video, true void */
  --surface-chip-translucent: rgba(245, 245, 247, 0.72);

  /* ---------- Text ---------- */
  --ink:           #0B0D17;  /* near-black with a cool blue undertone */
  --body:          #0B0D17;
  --body-on-dark:  #FFFFFF;
  --body-muted:    #C8CAD4;  /* secondary copy on dark */
  --ink-muted-80:  #2A2D3A;  /* body on soft canvas */
  --ink-muted-48:  #6B6E7E;  /* disabled, fine-print */
  --ink-muted-24:  #B8BAC4;  /* hairline labels */

  /* ---------- Hairlines ---------- */
  --divider-soft:  rgba(11, 13, 23, 0.04);
  --hairline:      rgba(11, 13, 23, 0.08);
  --hairline-strong: rgba(11, 13, 23, 0.16);

  /* ---------- Spacing ---------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  17px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ---------- Shadows ---------- */
  /* The ONLY drop-shadow in the system. Reserved for product imagery. */
  --shadow-product: 3px 5px 30px 0 rgba(11, 13, 23, 0.18);
  /* Aura — soft colored glow under hero gradient artwork */
  --shadow-aura:    0 40px 120px -20px rgba(79, 91, 255, 0.32);

  /* ---------- Motion ---------- */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- Typography ---------- */
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fz-hero:        56px;    --lh-hero:        1.07;  --ls-hero:        -0.025em;  --fw-hero:        600;
  --fz-display-lg:  40px;    --lh-display-lg:  1.10;  --ls-display-lg:  -0.022em;  --fw-display-lg:  600;
  --fz-display-md:  34px;    --lh-display-md:  1.18;  --ls-display-md:  -0.020em;  --fw-display-md:  600;
  --fz-lead:        28px;    --lh-lead:        1.21;  --ls-lead:        -0.014em;  --fw-lead:        400;
  --fz-lead-airy:   24px;    --lh-lead-airy:   1.45;  --ls-lead-airy:   -0.010em;  --fw-lead-airy:   300;
  --fz-tagline:     21px;    --lh-tagline:     1.24;  --ls-tagline:     -0.010em;  --fw-tagline:     600;
  --fz-body-strong: 17px;    --lh-body-strong: 1.44;  --ls-body-strong: -0.011em;  --fw-body-strong: 600;
  --fz-body:        17px;    --lh-body:        1.50;  --ls-body:        -0.011em;  --fw-body:        400;
  --fz-dense-link:  17px;    --lh-dense-link:  2.20;  --ls-dense-link:  -0.005em;  --fw-dense-link:  400;
  --fz-caption:     14px;    --lh-caption:     1.43;  --ls-caption:     -0.006em;  --fw-caption:     400;
  --fz-caption-strong: 14px; --lh-caption-strong: 1.29; --ls-caption-strong: -0.006em; --fw-caption-strong: 600;
  --fz-button-lg:   18px;    --lh-button-lg:   1.0;   --ls-button-lg:   0;          --fw-button-lg:   400;
  --fz-button:      14px;    --lh-button:      1.29;  --ls-button:      -0.006em;   --fw-button:      500;
  --fz-fine:        12px;    --lh-fine:        1.4;   --ls-fine:        0;          --fw-fine:        400;
  --fz-micro:       10px;    --lh-micro:       1.3;   --ls-micro:       0.01em;     --fw-micro:       400;
  --fz-nav:         12px;    --lh-nav:         1.0;   --ls-nav:         -0.003em;   --fw-nav:         500;
}

/* =========================================================================
   Semantic resets — opinionated baseline for Alveon artifacts
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

h1 { font-family: var(--font-display); font-size: var(--fz-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); font-weight: var(--fw-hero); }
h2 { font-family: var(--font-display); font-size: var(--fz-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); font-weight: var(--fw-display-lg); }
h3 { font-family: var(--font-display); font-size: var(--fz-display-md); line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); font-weight: var(--fw-display-md); }
h4 { font-size: var(--fz-tagline); line-height: var(--lh-tagline); letter-spacing: var(--ls-tagline); font-weight: var(--fw-tagline); }
p  { font-size: var(--fz-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }

a { color: var(--primary); text-decoration: none; transition: opacity var(--duration-base) var(--ease-default); }
a:hover { text-decoration: underline; }

code, pre, kbd, samp { font-family: var(--font-mono); }

::selection { background: var(--primary); color: #fff; }

/* =========================================================================
   Utility classes
   ========================================================================= */

.alveon-tile         { padding: var(--space-section) var(--space-xl); }
.alveon-tile--light  { background: var(--canvas);       color: var(--ink); }
.alveon-tile--soft   { background: var(--canvas-soft);  color: var(--ink); }
.alveon-tile--mist   { background: var(--canvas-mist);  color: var(--ink); }
.alveon-tile--dark   { background: var(--surface-tile-1); color: var(--body-on-dark); }

.alveon-press:active { transform: scale(0.97); transition: transform var(--duration-fast) var(--ease-default); }

.alveon-shadow-product { box-shadow: var(--shadow-product); }

/* Signature gradient text — used on key headlines, sparingly */
.alveon-grad-text {
  background: var(--gradient-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}