/* ===== Nightdream Labs — Design Tokens (Brand: navy / slate) ===== */
:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.6rem + 6vw, 6.25rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Radii */
  --radius-sm: 0.45rem; --radius-md: 0.7rem; --radius-lg: 1.1rem;
  --radius-xl: 1.5rem; --radius-full: 9999px;

  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1280px;

  /* DM Sans everywhere — display is DM Sans at heavy weights */
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-label: 'DM Sans', 'Inter', sans-serif;
  --font-body: 'DM Sans', 'Inter', system-ui, sans-serif;

  /* ===== Brand colours (sampled from logo) ===== */
  --brand-navy: #1F2C42;        /* wordmark ink */
  --brand-navy-deep: #0C1D39;   /* icon crescent, darkest */
  --brand-slate: #758D9D;       /* "Labs" / muted accent */
  --brand-grey: #717C87;        /* icon mid arcs */
  --brand-pale: #E8EDF2;        /* wordmark on dark */
  --brand-pale-slate: #8BAAB8;  /* "Labs" on dark */
  --brand-tint: #CFDFEC;        /* soft blue highlight on dark */

  /* ===== LIGHT (default) ===== */
  --color-bg: #FAF6F4;          /* stated light background */
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-offset: #f1ece9;
  --color-panel: #f3eeeb;
  --color-panel-edge: #ffffff;
  --color-divider: #e6ddd8;
  --color-border: #ddd2cc;

  --color-text: #1F2C42;        /* brand navy */
  --color-text-muted: #5d6b78;  /* slate-grey blend */
  --color-text-faint: #98a3ad;
  --color-text-inverse: #FAF6F4;

  /* Primary — brand navy (CTAs) */
  --color-primary: #1F2C42;
  --color-primary-hover: #0C1D39;
  --color-primary-active: #0C1D39;
  --color-primary-soft: #e7ebf0;

  /* Accent — slate-blue from the logo */
  --color-accent: #758D9D;
  --color-accent-soft: #e4eaee;
  --color-grey: #717C87;

  --shadow-sm: 0 1px 3px rgba(31, 44, 66, 0.06);
  --shadow-md: 0 12px 32px rgba(31, 44, 66, 0.10);
  --shadow-lg: 0 26px 64px rgba(31, 44, 66, 0.16);
  --shadow-glow: 0 0 0 1px rgba(31,44,66,0.10), 0 18px 44px rgba(31,44,66,0.20);

  --grad-night: linear-gradient(150deg, #0C1D39 0%, #1F2C42 60%, #2c3e5a 100%);
  --grad-dawn: linear-gradient(120deg, #1F2C42 0%, #758D9D 70%, #aebcc6 100%);
}

[data-theme='dark'] {
  /* stated dark background #1A1A2B + brand pales */
  --color-bg: #1A1A2B;
  --color-surface: #222236;
  --color-surface-2: #292941;
  --color-surface-offset: #1e1e30;
  --color-panel: #242438;
  --color-panel-edge: #34344c;
  --color-divider: #2f2f46;
  --color-border: #383850;

  --color-text: #E8EDF2;        /* brand pale */
  --color-text-muted: #a6b0bd;
  --color-text-faint: #6f7585;
  --color-text-inverse: #1A1A2B;

  --color-primary: #8BAAB8;     /* pale slate is the visible CTA on dark */
  --color-primary-hover: #a3bdc8;
  --color-primary-active: #cfdfec;
  --color-primary-soft: #25303f;

  --color-accent: #8BAAB8;
  --color-accent-soft: #232a38;
  --color-grey: #8b95a3;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 26px 64px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(139,170,184,0.18), 0 18px 44px rgba(0,0,0,0.5);

  --grad-night: linear-gradient(150deg, #14141f 0%, #1f1f33 55%, #2a2a44 100%);
  --grad-dawn: linear-gradient(120deg, #8BAAB8 0%, #aebcc6 55%, #cfdfec 100%);
}

/* ===== base reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem;
}
body{
  min-height:100dvh;line-height:1.6;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);
  transition:background var(--transition), color var(--transition);
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role='list']{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.08;font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em}
p,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none}
::selection{background:rgba(117,141,157,0.28);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== shared layout helpers ===== */
.wrap{width:min(100% - 2.5rem, var(--content-wide));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem, var(--content-default));margin-inline:auto}
.font-label{font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-label);font-size:var(--text-xs);font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--color-accent);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* full logo image swap by theme (used at larger sizes: hero/footer/holding) */
.logo-img{height:34px;width:auto}
.logo-img.on-light{display:block}
.logo-img.on-dark{display:none}
[data-theme='dark'] .logo-img.on-light{display:none}
[data-theme='dark'] .logo-img.on-dark{display:block}

/* compact nav lockup: wave icon + text wordmark (legible at small size) */
.brand-lockup{display:inline-flex;align-items:center;gap:0.55rem}
.brand-lockup .mark{height:30px;width:auto}
.brand-lockup .mark.on-light{display:block}
.brand-lockup .mark.on-dark{display:none}
[data-theme='dark'] .brand-lockup .mark.on-light{display:none}
[data-theme='dark'] .brand-lockup .mark.on-dark{display:block}
.brand-lockup .wm{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-0.02em;color:var(--brand-navy);line-height:1}
.brand-lockup .wm b{font-weight:700}
.brand-lockup .wm span{font-weight:500;color:var(--color-accent)}
[data-theme='dark'] .brand-lockup .wm{color:var(--brand-pale)}
[data-theme='dark'] .brand-lockup .wm span{color:var(--brand-pale-slate)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-label);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.01em;
  padding:0.8rem 1.5rem;border-radius:var(--radius-sm);transition:all var(--transition);
}
.btn-primary{background:var(--color-primary);color:var(--color-bg);box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
[data-theme='dark'] .btn-primary{color:#14141f}
.btn-ghost{border:1.5px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-soft)}