/* ════════════════════════════════════════════════════════════════
   tidepage — design tokens (vendored)
   Concatenated from design-package/tokens/* so the landing page is
   self-contained and deployable on its own. If the design system
   changes, re-vendor with:
     cat design-package/tokens/{fonts,colors,typography,spacing,elevation,motion,base}.css > landing/css/tokens.css
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   tidepage — Webfonts
   Newsreader        — display / headings / wordmark (Google Fonts)
                       thin editorial serif; the wordmark is weight 300
                       with the first "e" mirrored (see brand/BRAND_BRIEF.md)
   Schibsted Grotesk — UI / body (Google Fonts)  [unchanged]
   Martian Mono      — markup, technical labels, eyebrows (Google Fonts)  [unchanged]

   Replaces the Clash Display dependency (and its Fontshare @import).
   All three faces are open-source (SIL OFL) and safe to self-host;
   self-hosting is preferred for the desktop (Electron) build — mirror
   the woff2 locally and swap these @imports for @font-face rules.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300..600&family=Martian+Mono:wght@400..600&family=Schibsted+Grotesk:wght@400..700&display=swap');
/* ─────────────────────────────────────────────────────────────
   tidepage — Color tokens  (Palette A · "Shoreline Teal")
   Sea-biased graphite neutrals + a single reserved TIDE accent.
   Same monochrome-with-one-accent discipline as before; the accent
   only ever marks the live / highlighted / "the tide is here" thing.
   Dark mode (cool, near-black) re-maps semantics only.

   Drop-in replacement for design-package/tokens/colors.css:
   same var names; the IRIS ramp becomes the TIDE ramp, and the
   slate ramp is retuned with a faint teal bias.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Slate: cool graphite, faint sea bias ────────────────── */
  --slate-50:  #F5F8F7;
  --slate-100: #EAF0EE;   /* workspace behind the document */
  --slate-200: #DCE4E1;
  --slate-300: #C3CFCB;
  --slate-400: #97A6A2;
  --slate-500: #66736F;
  --slate-600: #4A5754;
  --slate-700: #313D3A;
  --slate-800: #1D2725;
  --slate-900: #0F1614;
  --slate-950: #080D0C;
  --white:     #FFFFFF;

  /* ── Tide: brand accent ramp (teal-green, not AI-blue) ───── */
  --tide-50:  #E4F6F2;
  --tide-100: #C5ECE6;
  --tide-200: #93DDD2;
  --tide-300: #4FCBBC;
  --tide-400: #1FB6A6;
  --tide-500: #0FA697;   /* brand accent */
  --tide-600: #0B8B7E;
  --tide-700: #097066;
  --tide-800: #06605A;
  --tide-900: #053F3B;
  --tide-bright: #2FD6C0; /* luminous step — dark-mode accent / glow / the live wave on dark */

  /* ── Semantic hues (info nudged bluer so it reads apart
        from the teal brand) ─────────────────────────────────── */
  --green-100: #D8F2E1;  --green-500: #1F9D5C;  --green-700: #137043;
  --amber-100: #FBE8C8;  --amber-500: #D98A0B;  --amber-700: #935C05;
  --red-100:   #FBDFDA;  --red-500:   #E0432E;  --red-700:   #AE2B1B;
  --blue-100:  #D7E6FA;  --blue-500:  #2C72C9;  --blue-700:  #1C4E94;

  /* ─────────────────────────────────────────────────────────
     Semantic aliases — LIGHT (default)
     ───────────────────────────────────────────────────────── */
  --surface-page:    var(--slate-100);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--slate-200);
  --surface-inset:   var(--slate-50);
  --surface-hover:   var(--slate-100);
  --surface-active:  var(--slate-200);

  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-muted:      var(--slate-500);
  --text-faint:      var(--slate-400);
  --text-inverted:   var(--slate-50);
  --text-on-accent:  #04201D;            /* ink-teal: legible on the bright accent */
  --text-link:       var(--tide-700);

  --border-subtle:   var(--slate-200);
  --border-default:  var(--slate-300);
  --border-strong:   var(--slate-400);

  --accent:          var(--tide-500);
  --accent-hover:    var(--tide-600);
  --accent-pressed:  var(--tide-700);
  --accent-subtle:   var(--tide-50);
  --accent-border:   var(--tide-200);
  --accent-text:     var(--tide-700);

  /* Highlight — a refined tide wash, not a second hue */
  --highlight:        var(--tide-500);
  --highlight-bg:     var(--tide-50);
  --highlight-fg:     var(--tide-700);
  --highlight-border: var(--tide-200);
  --highlight-ink:    var(--tide-700);

  --focus-ring:      color-mix(in srgb, var(--tide-500) 45%, transparent);

  --success-bg: var(--green-100);  --success-fg: var(--green-700); --success: var(--green-500);
  --warning-bg: var(--amber-100);  --warning-fg: var(--amber-700); --warning: var(--amber-500);
  --danger-bg:  var(--red-100);    --danger-fg:  var(--red-700);   --danger:  var(--red-500);
  --info-bg:    var(--blue-100);   --info-fg:    var(--blue-700);  --info:    var(--blue-500);

  --selection-bg: color-mix(in srgb, var(--tide-300) 50%, transparent);
  --scrim:        color-mix(in srgb, var(--slate-950) 48%, transparent);
}

/* ───────────────────────────────────────────────────────────
   Semantic aliases — DARK (cool, near-black)
   ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-page:    var(--slate-950);
  --surface-card:    var(--slate-900);
  --surface-raised:  #18211F;
  --surface-sunken:  #060A09;
  --surface-inset:   #101715;
  --surface-hover:   #18211F;
  --surface-active:  #202B28;

  --text-primary:    var(--slate-50);
  --text-secondary:  var(--slate-300);
  --text-muted:      var(--slate-400);
  --text-faint:      var(--slate-600);
  --text-inverted:   var(--slate-900);
  --text-on-accent:  #04201D;
  --text-link:       var(--tide-300);

  --border-subtle:   #202B28;
  --border-default:  #2E3A37;
  --border-strong:   #43504C;

  --accent:          var(--tide-500);
  --accent-hover:    var(--tide-400);
  --accent-pressed:  var(--tide-300);
  --accent-subtle:   color-mix(in srgb, var(--tide-500) 20%, transparent);
  --accent-border:   color-mix(in srgb, var(--tide-400) 40%, transparent);
  --accent-text:     var(--tide-300);

  --highlight-bg:    color-mix(in srgb, var(--tide-500) 22%, transparent);
  --highlight-fg:    var(--tide-300);
  --highlight-border: color-mix(in srgb, var(--tide-400) 50%, transparent);
  --highlight-ink:   var(--tide-300);

  --focus-ring:      color-mix(in srgb, var(--tide-400) 55%, transparent);

  --success-bg: color-mix(in srgb, var(--green-500) 20%, transparent); --success-fg: #6FD79C;
  --warning-bg: color-mix(in srgb, var(--amber-500) 22%, transparent); --warning-fg: #E6B65C;
  --danger-bg:  color-mix(in srgb, var(--red-500) 22%, transparent);   --danger-fg:  #ED8A79;
  --info-bg:    color-mix(in srgb, var(--blue-500) 24%, transparent);  --info-fg:    #8FB8EC;

  --selection-bg: color-mix(in srgb, var(--tide-500) 42%, transparent);
  --scrim:        color-mix(in srgb, #000 62%, transparent);
}

::selection { background: var(--selection-bg); }
/* ─────────────────────────────────────────────────────────────
   tidepage — Typography tokens
   Newsreader (display/headings/wordmark — a thin editorial serif),
   Schibsted Grotesk (UI/body), Martian Mono (markup/labels/eyebrow).
   The serif is the editorial voice the rebrand leans into; the UI
   stays in the grotesk so the product reads crisp.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Families ────────────────────────────────────────────── */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Wordmark is a specific cut of the display face (see brand/BRAND_BRIEF.md):
     Newsreader 300, first "e" mirrored, tracking -0.01em. */
  --wordmark-weight:  300;
  --wordmark-tracking: -0.01em;

  /* ── Type scale (px-based) ───────────────────────────────── */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;   /* default UI body */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  46px;
  --text-5xl:  60px;
  --text-6xl:  78px;

  /* ── Weights ─────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line heights ────────────────────────────────────────── */
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter spacing ──────────────────────────────────────── */
  --tracking-tight:  -0.02em;    /* Newsreader display — serifs want looser tracking than the old geometric sans */
  --tracking-snug:   -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.05em;     /* Martian Mono is already wide */

  /* ── Semantic roles ──────────────────────────────────────── */
  --display-font:   var(--font-display);
  --display-weight: 500;         /* editorial serif reads best mid-weight, not bold */
  --heading-font:   var(--font-display);
  --heading-weight: 500;
  --body-font:      var(--font-sans);
  --eyebrow-font:   var(--font-mono);
}
/* ─────────────────────────────────────────────────────────────
   tidepage — Spacing, radii, sizing
   4px base grid. Radii are crisp and restrained — a precise tool,
   not a soft consumer toy.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Spacing scale (4px base) ────────────────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Radii (crisp) ───────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;    /* default — buttons, inputs */
  --radius-lg:   9px;    /* cards, panels */
  --radius-xl:   13px;   /* large surfaces, dialogs */
  --radius-2xl:  18px;
  --radius-full: 999px;

  /* ── Control heights (44px min touch target on mobile) ───── */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;

  /* ── Layout ──────────────────────────────────────────────── */
  --toolbar-height:  52px;
  --sidebar-width:   268px;
  --content-max:     820px;   /* document reading measure */
  --border-width:    1px;
}
/* ─────────────────────────────────────────────────────────────
   tidepage — Elevation
   Crisp, cool-tinted, low shadows. This is a precise tool: borders
   do most of the separation; shadow only lifts floating surfaces.
   One accent-glow, used sparingly on the primary action / selection.
   ───────────────────────────────────────────────────────────── */

:root {
  --shadow-xs:  0 1px 1px color-mix(in srgb, var(--slate-950) 6%, transparent);
  --shadow-sm:  0 1px 2px color-mix(in srgb, var(--slate-950) 8%, transparent),
                0 1px 3px color-mix(in srgb, var(--slate-950) 6%, transparent);
  --shadow-md:  0 2px 4px color-mix(in srgb, var(--slate-950) 7%, transparent),
                0 6px 16px color-mix(in srgb, var(--slate-950) 10%, transparent);
  --shadow-lg:  0 4px 8px color-mix(in srgb, var(--slate-950) 8%, transparent),
                0 16px 40px color-mix(in srgb, var(--slate-950) 14%, transparent);
  --shadow-pop: 0 2px 6px color-mix(in srgb, var(--slate-950) 9%, transparent),
                0 12px 32px color-mix(in srgb, var(--slate-950) 18%, transparent);

  /* Focus ring as a reusable box-shadow */
  --ring: 0 0 0 3px var(--focus-ring);

  /* Hairline inset for cards on light surfaces */
  --shadow-hairline: inset 0 0 0 1px color-mix(in srgb, var(--slate-950) 5%, transparent);

  /* Accent glow — the tide accent; primary CTA hover / selection only */
  --shadow-glow: 0 4px 14px color-mix(in srgb, var(--tide-500) 30%, transparent),
                 0 1px 4px color-mix(in srgb, var(--tide-500) 22%, transparent);
}

[data-theme="dark"] {
  --shadow-xs:  0 1px 1px color-mix(in srgb, #000 35%, transparent);
  --shadow-sm:  0 1px 2px color-mix(in srgb, #000 40%, transparent),
                0 1px 3px color-mix(in srgb, #000 30%, transparent);
  --shadow-md:  0 2px 6px color-mix(in srgb, #000 40%, transparent),
                0 8px 20px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg:  0 6px 14px color-mix(in srgb, #000 45%, transparent),
                0 20px 48px color-mix(in srgb, #000 60%, transparent);
  --shadow-pop: 0 4px 10px color-mix(in srgb, #000 50%, transparent),
                0 16px 40px color-mix(in srgb, #000 65%, transparent);
  --shadow-hairline: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
  --shadow-glow: 0 4px 18px color-mix(in srgb, var(--tide-500) 45%, transparent),
                 0 1px 5px color-mix(in srgb, var(--tide-400) 35%, transparent);
}
/* ─────────────────────────────────────────────────────────────
   tidepage — Motion
   Calm and quick. Things ease into place; nothing bounces or
   springs. Default to fades + tiny translateY. Respect reduced
   motion always.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Durations */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    340ms; /* @kind other */
  --dur-slower:  520ms; /* @kind other */

  /* Easing */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */

  /* Composed transition presets */
  --transition-colors: color var(--dur-fast) var(--ease-standard),
                        background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard);
  --transition-transform: transform var(--dur-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   tidepage — Base
   A light reset + sensible element defaults wired to tokens.
   Keep this minimal; components carry their own styling.
   ───────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
  transition: var(--transition-colors);
}
a:hover { text-decoration-color: currentColor; }

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

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* Utility: the display grotesk for headlines / wordmark moments */
.font-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Utility: monospace eyebrow / overline */
.eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}