/* =========================================================
   Ghosted — design tokens (Superhuman-language makeover)
   Single source of truth for all 5 web pages + extension.
   Load this BEFORE any other stylesheet.
   ========================================================= */

/* Inter Variable (open-source substitute for Super Sans VF).
   Sub-default weights 460/540/600 are the brand's typographic signature. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;460;500;540;600;700&display=swap');

:root {
  /* ---------- Colors ---------- */
  /* Indigo register (hero, primary CTA) */
  --color-primary:        #1b1938;
  --color-primary-deep:   #0e0c1f;
  --color-on-primary:     #ffffff;

  /* Body / canvas register */
  --color-canvas:         #ffffff;
  --color-canvas-soft:    #fafaf8;
  --color-ink:            #292827;   /* warm dark grey — NEVER pure black */
  --color-ink-mute:       #73706d;
  --color-ink-faint:      #9a9794;

  /* Accent */
  --color-violet-soft:    #c9b4fa;   /* hero pill CTA only */

  /* Closing band register — DEEP MAROON (matches actual Superhuman footer) */
  --color-teal-deep:      #3d2222;
  --color-teal-mid:       #5a3232;

  /* Hairlines */
  --color-hairline:       #e8e4dd;
  --color-hairline-dark:  #3f3a52;

  /* On-dark text translucencies */
  --color-on-dark-mute:   rgba(255,255,255,0.74);
  --color-on-dark-faint:  rgba(255,255,255,0.45);

  /* Atmospheric hero backdrop — violet-sky radial wash over deep indigo */
  --hero-backdrop:
    radial-gradient(120% 80% at 80% 20%, rgba(201,180,250,0.32) 0%, transparent 55%),
    radial-gradient(80% 60% at 15% 90%, rgba(140,180,240,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type sizes */
  --fs-display-xxl: 64px;
  --fs-display-xl:  48px;
  --fs-display-lg:  28px;
  --fs-display-md:  22px;
  --fs-heading-lg:  20px;
  --fs-body-lg:     18px;
  --fs-body-md:     16px;
  --fs-body-strong: 18.72px;
  --fs-button:      16px;
  --fs-button-cap:  14px;
  --fs-caption:     14px;
  --fs-micro:       12px;

  /* Mobile display scales */
  --fs-display-xxl-mobile: 40px;
  --fs-display-xl-mobile:  32px;

  /* ---------- Radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;     /* button signature shape */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------- Spacing (8px base) ---------- */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-huge: 64px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.12);

  /* ---------- Container ---------- */
  --container-max:    1280px;
  --container-narrow: 1120px;

  /* ---------- Safe areas ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Universal reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  line-height: 1.5;
  font-variation-settings: 'wght' 460;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-ink);
  background: var(--color-canvas);
}

img, svg, video { max-width: 100%; display: block; }

/* Typography utility classes (used across pages) */
.t-display-xxl { font-size: var(--fs-display-xxl); line-height: 0.96;  letter-spacing: -1px; font-variation-settings: 'wght' 540; }
.t-display-xl  { font-size: var(--fs-display-xl);  line-height: 0.96;  letter-spacing: -1.32px; font-variation-settings: 'wght' 460; }
.t-display-lg  { font-size: var(--fs-display-lg);  line-height: 1.14;  letter-spacing: -0.63px; font-variation-settings: 'wght' 540; }
.t-display-md  { font-size: var(--fs-display-md);  line-height: 1.1;   letter-spacing: -0.315px; font-variation-settings: 'wght' 460; }
.t-heading-lg  { font-size: var(--fs-heading-lg);  line-height: 1.2;   letter-spacing: -0.4px;  font-variation-settings: 'wght' 460; }
.t-body-lg     { font-size: var(--fs-body-lg);     line-height: 1.5;   letter-spacing: -0.135px; font-variation-settings: 'wght' 540; }
.t-body-md     { font-size: var(--fs-body-md);     line-height: 1.5;   font-variation-settings: 'wght' 460; }
.t-body-strong { font-size: var(--fs-body-strong); line-height: 1.5;   font-variation-settings: 'wght' 700; }
.t-caption     { font-size: var(--fs-caption);     line-height: 1.4;   font-variation-settings: 'wght' 460; }
.t-micro       { font-size: var(--fs-micro);       line-height: 1.4;   font-variation-settings: 'wght' 540; }

@media (max-width: 768px) {
  .t-display-xxl { font-size: var(--fs-display-xxl-mobile); }
  .t-display-xl  { font-size: var(--fs-display-xl-mobile);  }
}