/* =============================================================================
   Neginato — base.css
   Design tokens, reset, theming, typography, and layout primitives.
   Brand: golden saxophone on deep navy · bit-perfect accent: mint / emerald.
   Dark-first, with a full light theme via prefers-color-scheme and a manual
   [data-theme] override. No framework, no build step.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Design tokens (dark theme = default)
   ---------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand */
  --gold:        #d9a93a;
  --gold-bright: #f0c45a;
  --gold-deep:   #b8892a;

  /* Bit-perfect accent (from the app's Signal-Match badge) */
  --mint:        #4fe0a6;
  --mint-dim:    #2fb582;
  --amber:       #f4b24c;   /* "altered" / warning */

  /* Navy surface stack */
  --bg:          #0a1120;
  --bg-2:        #0e1626;
  --surface:     #141d30;
  --surface-2:   #1a2440;
  --elevated:    #1e2a49;

  /* Text */
  --text:        #e9eef8;
  --text-strong: #ffffff;
  --muted:       #a2b3ce;
  --faint:       #8493ae;

  /* Lines & effects */
  --border:      rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ring:        color-mix(in srgb, var(--mint) 70%, transparent);
  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2:    0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-3:    0 30px 80px -28px rgba(0, 0, 0, 0.75);
  --glow-mint:   0 0 0 1px color-mix(in srgb, var(--mint) 40%, transparent),
                 0 8px 40px -12px color-mix(in srgb, var(--mint) 45%, transparent);

  /* Gradients */
  --grad-hero:   radial-gradient(120% 120% at 50% -10%, #1b2a4d 0%, #0e1626 42%, #0a1120 100%);
  --grad-gold:   linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  --grad-mint:   linear-gradient(135deg, #7ff0c2, var(--mint) 60%, var(--mint-dim));

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* Fluid type scale */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.6vw, 3.9rem);
  --step-5:  clamp(2.9rem, 2.1rem + 4vw, 5.2rem);

  /* Spacing scale */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4.5rem;   --space-9: 7rem;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* Layout */
  --maxw: 1120px;
  --maxw-prose: 68ch;

  --dur: 0.45s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light theme — applied when the OS prefers light (unless forced dark),
   or when [data-theme="light"] is set explicitly. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --gold: #a9781a; --gold-bright: #c79320; --gold-deep: #8a610f;
    --mint: #0e9e6a; --mint-dim: #0b7d53; --amber: #b4740a;
    --bg: #f5f7fc; --bg-2: #eef2fa; --surface: #ffffff; --surface-2: #f4f7fd;
    --elevated: #ffffff;
    --text: #101a2d; --text-strong: #05264a; --muted: #52607a; --faint: #5f6c82;
    --border: rgba(16, 26, 45, 0.10); --border-strong: rgba(16, 26, 45, 0.18);
    --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.10);
    --shadow-2: 0 14px 34px -16px rgba(20, 33, 61, 0.22);
    --shadow-3: 0 34px 80px -30px rgba(20, 33, 61, 0.30);
    --grad-hero: radial-gradient(120% 120% at 50% -10%, #ffffff 0%, #eef3fc 45%, #e7edf9 100%);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --gold: #a9781a; --gold-bright: #c79320; --gold-deep: #8a610f;
  --mint: #0e9e6a; --mint-dim: #0b7d53; --amber: #b4740a;
  --bg: #f5f7fc; --bg-2: #eef2fa; --surface: #ffffff; --surface-2: #f4f7fd;
  --elevated: #ffffff;
  --text: #101a2d; --text-strong: #05264a; --muted: #52607a; --faint: #5f6c82;
  --border: rgba(16, 26, 45, 0.10); --border-strong: rgba(16, 26, 45, 0.18);
  --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.10);
  --shadow-2: 0 14px 34px -16px rgba(20, 33, 61, 0.22);
  --shadow-3: 0 34px 80px -30px rgba(20, 33, 61, 0.30);
  --grad-hero: radial-gradient(120% 120% at 50% -10%, #ffffff 0%, #eef3fc 45%, #e7edf9 100%);
}

/* ----------------------------------------------------------------------------
   Reset
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; padding: 0; }

/* ----------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 680;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
p  { text-wrap: pretty; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.55; }
/* Darken the eyebrow's mint in light themes so the small uppercase label clears WCAG AA. */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .eyebrow { color: #0b7d53; } }
[data-theme="light"] .eyebrow { color: #0b7d53; }
.muted { color: var(--muted); }
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mint-text {
  background: var(--grad-mint);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
kbd {
  font-family: var(--font-mono); font-size: 0.82em;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 0.1em 0.45em; box-shadow: var(--shadow-1);
}

/* ----------------------------------------------------------------------------
   Layout primitives
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.prose { max-width: var(--maxw-prose); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose ul { padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.prose a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--text-strong); }

.stack > * + * { margin-top: var(--space-4); }
.center { text-align: center; }
.center-x { margin-inline: auto; }
.divider { height: 1px; background: var(--border); border: 0; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -3rem;
  background: var(--mint); color: #04241a; font-weight: 640;
  padding: 0.6rem 1rem; border-radius: var(--r-sm); z-index: 100;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

:where(a, button, [tabindex], input, summary):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ----------------------------------------------------------------------------
   Motion — reveal-on-scroll (progressive; no-JS shows everything)
   ---------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.no-js .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}