/* Shell tokens for Index, About, Playground, and AI Workflow.
   Host accent and header accent are the same index blue (#7ea2ff).
   Do not merge with case-study palettes.
   --color-bg-deepseek is a leftover and is intentionally absent. */

:root {
  /* Host layer — showcase shell. Header check uses this same blue. */
  --color-theme-1: #ffffff;
  --color-theme-2: #7ea2ff;
  --color-theme-3: rgba(126, 162, 255, 0.15);
  --color-theme-hover: #a9c4ff;
  --color-primary-solid: #7ea2ff;

  --color-bg-page: #0a0a0a;
  --color-bg-primary: #111214;
  --color-bg-secondary: #1a1c1f;
  --color-bg-elevated: #1f2124;

  --color-text-1: #f9fbfc;
  --color-text-2: #b6bbc2;
  --color-text-3: #777e85;
  --color-text-4: #595d61;

  --color-border-frame: #1a1b1f;
  --color-border-container: #242629;
  --color-border-divider: #343638;
  --color-border-hover: #76787a;

  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --surface-raise: rgba(255, 255, 255, 0.06);

  --nav-top-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  --nav-scrolled-bg: rgba(10, 10, 10, 0.78);

  --pill-text: #f9fbfc;
  --pill-border: rgba(249, 251, 252, 0.72);
  --pill-bg: transparent;
  --pill-hover-bg: #f9fbfc;
  --pill-hover-text: #0a0a0a;
  --pill-hover-shadow: none;

  --button-cta-height: 46px;
  --button-cta-padding-inline: 28px;
  --button-cta-font-size: 0.95rem;
  --button-cta-line-height: 1;
  --button-cta-font-weight: 400;
  --button-cta-gap: 8px;
  --button-cta-icon-size: 16px;
  --button-cta-radius: var(--radius-pill);
  --button-cta-border-width: 1px;

  --panel-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    0 12px 30px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  --card-bg: #111214;
  --card-border: rgba(255, 255, 255, 0.07);
  --card-border-hover: rgba(255, 255, 255, 0.16);
  --card-glow: rgba(126, 162, 255, 0.15);
  --card-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 48px -26px rgba(126, 162, 255, 0.14),
    0 10px 28px -12px rgba(0, 0, 0, 0.65);
  --card-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 32px 64px -26px rgba(126, 162, 255, 0.24),
    0 14px 34px -12px rgba(0, 0, 0, 0.75);

  --grain-opacity: 0.035;
  --grain-blend: overlay;

  --selection-bg: rgba(126, 162, 255, 0.35);
  --selection-text: #ffffff;

  --exp-accent: #7ea2ff;
  --exp-accent-bright: #a9c4ff;
  --exp-glow-wide: rgba(126, 162, 255, 0.22);
  --exp-glow-mid: rgba(126, 162, 255, 0.34);
  --exp-track: rgba(255, 255, 255, 0.09);
  --exp-dot-ring: rgba(255, 255, 255, 0.35);
  --exp-connector: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 65%,
    rgba(255, 255, 255, 0.5) 100%
  );
  --exp-desc: rgba(249, 251, 252, 0.66);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1440px;
  --editorial: 1040px;
  --pad: 24px;

  --footer-max-w: var(--editorial);
  --color-footer-divider: rgba(255, 255, 255, 0.045);

  --focus-ring: var(--color-theme-2);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --state-disabled-opacity: 0.45;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-meta: 0.14em;

  /* Type scale — Master DS + portfolio-consistency-guide §2.2
     Roles: Display / H1–H3 / Body / Caption / Pill (+ shared leading/tracking). */
  --font-size-display: clamp(2.25rem, 5.2vw, 4rem); /* Display / H1 Index+About */
  --font-size-display-editorial: clamp(2.4rem, 6vw, 4.75rem); /* Display large — Poppins (same face as UI) */
  --font-size-heading: 1.9rem; /* H2 */
  --font-size-heading-lg: 2.25rem; /* H2 md:text-4xl */
  --font-size-h3: 1.15rem; /* H3 accordion */
  --font-size-h3-card: 1.75rem; /* H3 card title ~28px */
  --font-size-contact: clamp(1.6rem, 2.6vw, 2.4rem); /* H3 contact heading */
  --font-size-subhead: 1.25rem;
  --font-size-subhead-lg: 1.5rem;
  --font-size-body: 0.9375rem; /* Body R 15px */
  --font-size-body-lg: 1.0625rem; /* Body L 17px */
  --font-size-caption: 0.8125rem; /* Caption / eyebrow 13px; pill S */
  --font-size-meta: 0.6875rem; /* Meta 11px */
  --font-size-pill: 0.95rem; /* Pill M */
  --font-size-footer-note: 0.75rem; /* Footer note 12px */

  --leading-display: 1.08;
  --leading-editorial: 1.05;
  --leading-heading: 1.1;
  --leading-body: 1.75;
  --leading-relaxed: 1.625;
  --tracking-display: -0.025em;
  --tracking-editorial: -0.03em;
  --tracking-eyebrow: 0.28em;

  /* Recurring space / radius (foundation; used by Playground host + shell) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --duration-fast: 200ms;
  --duration-interaction: 320ms;
  --duration-reveal: 800ms;

  /* Page gutter. 24px until the 1440 well is centered, then the
     side margin of that well. Header and page content share this edge. */
  --content-inset: max(var(--pad), calc((100% - var(--wrap)) / 2));
}

/* Header focus stays currentColor in global-header/header.css. */
:where(.pill-btn, .nextgen-card, .accordion-item, .footer-text-link):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}