/* Cove — coming-soon page styles.
 *
 * Token values are copied from Cove's design system
 * (cove/cove-web/design-system/tokens/{colors,typography,spacing,elevation}.css)
 * so this standalone page stays recognisably the same system without
 * importing anything from that repo. Token NAMES match the source where a
 * token exists there; a few page-only semantic aliases (--text-wordmark,
 * --border-console) are added for this marketing surface.
 *
 * Every custom property that holds a COLOR is defined once in the bare
 * :root block below and redefined in the `prefers-color-scheme: dark`
 * block further down — see the "COLOR TOKENS" markers in both places.
 * Nothing here uses a raw literal color outside those two blocks.
 */

:root {
  color-scheme: light dark;

  /* ---- Type ---- */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --text-2xl: 1.5rem;    --text-2xl-lh: 1.333;
  --text-lg:  1.125rem;  --text-lg-lh:  1.556;
  --text-base:1rem;      --text-base-lh:1.5;
  --text-sm:  0.875rem;  --text-sm-lh:  1.4286;
  --text-xs:  0.75rem;   --text-xs-lh:  1.333;
  --text-13:  0.8125rem;
  --text-11:  0.6875rem;

  /* Hero headline goes above the app's 2xl page-title cap — this is a
     marketing surface, everything else stays on the scale above. */
  --text-hero: clamp(2rem, 1.35rem + 3vw, 3rem);
  --text-hero-lh: 1.15;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-label:  0.6px;

  --leading-none:  1;
  --leading-tight: 1.25;
  --leading-normal:1.5;

  --label-size: var(--text-11);
  --label-transform: uppercase;
  --label-tracking: var(--tracking-label);
  --label-weight: var(--weight-semibold);

  /* ---- Spacing / radius / layout ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-3-5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;

  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-full: 9999px;

  --page-max-narrow: 42rem;
  --page-gutter: 1.5rem;

  --control-height-md: 38px;
  --hit-min: 44px;

  /* ---- Elevation / borders / motion ---- */
  --border-width: 1px;
  --ring-width-focus: 2px;

  --duration-fast: 0.15s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --anim-pulse: cove-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;

  /* ==== COLOR TOKENS (light) ==== */
  --surface-page:             #ffffff;                    /* white */
  --surface-subtle:           oklch(98.5% .002 247.839);   /* gray-50 */
  --surface-console:          #1a1a2e;                     /* fixed console surface */
  --text-primary:             oklch(21%   .034 264.665);   /* gray-900 */
  --text-secondary:           oklch(55.1% .027 264.364);   /* gray-500 */
  --text-tertiary:            oklch(70.7% .022 261.325);   /* gray-400 — kept for
     the design-system vocabulary; NOT used for text on this page (fails WCAG
     AA at small sizes, 2.60:1 light / 3.67:1 dark — see scratchpad/contrast.py) */
  --text-wordmark:            #1e5288;                     /* brand-navy */
  --text-terminal:            oklch(79.2% .209 151.711);   /* green-400 */
  --border-default:           oklch(92.8% .006 264.531);   /* gray-200 */
  --border-console:           oklch(55.1% .027 264.364);   /* gray-500 */
  --focus-ring-color:         oklch(70.7% .022 261.325);   /* gray-400 */
  --action-primary-bg:        oklch(21%   .034 264.665);   /* gray-900 */
  --action-primary-bg-hover:  oklch(37.3% .034 259.733);   /* gray-700 */
  --action-primary-text:      #ffffff;                     /* white */
  --brand-cyan:               #22d3ee;                     /* the terminal cursor */
  /* ==== END COLOR TOKENS ==== */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ==== COLOR TOKENS (dark) ==== */
    --surface-page:             oklch(21%   .034 264.665); /* gray-900 */
    --surface-subtle:           oklch(27.8% .033 256.848); /* gray-800 */
    --surface-console:          #1a1a2e;                   /* fixed console surface */
    --text-primary:             oklch(98.5% .002 247.839); /* gray-50 */
    --text-secondary:           oklch(87.2% .01  258.338); /* gray-300 */
    --text-tertiary:            oklch(55.1% .027 264.364); /* gray-500 — kept for
       the design-system vocabulary; NOT used for text on this page (fails WCAG
       AA at small sizes, 2.60:1 light / 3.67:1 dark — see scratchpad/contrast.py) */
    --text-wordmark:            oklch(92.8% .006 264.531); /* gray-200 */
    --text-terminal:            oklch(79.2% .209 151.711); /* green-400 */
    --border-default:           oklch(37.3% .034 259.733); /* gray-700 */
    --border-console:           oklch(55.1% .027 264.364); /* gray-500 */
    --focus-ring-color:         oklch(87.2% .01  258.338); /* gray-300 */
    --action-primary-bg:        oklch(96.7% .003 264.542); /* gray-100 */
    --action-primary-bg-hover:  oklch(87.2% .01  258.338); /* gray-300 */
    --action-primary-text:      oklch(21%   .034 264.665); /* gray-900 */
    --brand-cyan:               #22d3ee;                   /* the terminal cursor */
    /* ==== END COLOR TOKENS ==== */
  }
}

@keyframes cove-pulse { 50% { opacity: 0.5; } }

/* ---- Reset-ish basics ---- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

main, footer { display: block; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Layout ---- */
.wrap {
  max-width: var(--page-max-narrow);
  margin-inline: auto;
  padding: var(--space-12) var(--page-gutter) var(--space-10);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.logo { width: 64px; height: 64px; border-radius: var(--radius-md); }
.logo-dark { display: none; }

.wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-wordmark);
}

@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--text-secondary); /* --text-tertiary fails WCAG AA (2.60:1 light,
     3.67:1 dark) at this small size — see scratchpad/contrast.py */
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-hero);
  line-height: var(--text-hero-lh);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}

.lede {
  margin: 0 0 var(--space-4);
  max-width: 38ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Supporting paragraph under the lede. Same secondary colour, one step down
   in size, so the hierarchy reads headline -> lede -> detail without
   introducing a third text colour. */
/* The privacy line under the form. Deliberately NOT tertiary: it is the one
   thing on the page making a promise about someone's personal data, so it sits
   at the same contrast as the rest of the body copy rather than being styled
   as fine print. Small, but legible in both themes. */
.privacy {
  margin: var(--space-4) 0 0;
  max-width: 46ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.privacy a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.privacy a:hover,
.privacy a:focus-visible {
  color: var(--text-primary);
}

.detail {
  margin: 0 0 var(--space-8);
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ---- Terminal block ---- */
.terminal {
  margin: 0 0 var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-console);
  border: var(--border-width) solid var(--border-console);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.terminal-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-13);
  line-height: var(--leading-normal);
  color: var(--text-terminal);
  white-space: pre;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: var(--brand-cyan);
  animation: var(--anim-pulse);
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ---- Sign-up form ---- */
.signup { margin: 0; }

.signup-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.field { margin-bottom: var(--space-4); }

label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

input[type="email"],
input[type="text"],
textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

textarea {
  min-height: calc(var(--control-height-md) * 2);
  resize: vertical;
  font-family: var(--font-sans);
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: var(--ring-width-focus) solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  input, textarea, button { transition: none; }
}

/* ---- Honeypot ----
 * "website" is a decoy field for bots — real users never see or reach it.
 * Kept off-canvas (not display:none, which some bots skip) and out of the
 * tab order. Do not give it a visible label or "fix" its position. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--action-primary-text);
  background: var(--action-primary-bg);
  border: var(--border-width) solid var(--action-primary-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn-primary:hover { background: var(--action-primary-bg-hover); border-color: var(--action-primary-bg-hover); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: none; }
}

.form-message {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

[hidden] { display: none; }

.thank-you {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* ---- Footer ---- */
footer {
  padding: 0 var(--page-gutter) var(--space-10);
  text-align: center;
}

.footer-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary); /* --text-tertiary fails WCAG AA (2.60:1 light,
     3.67:1 dark) at this small size — see scratchpad/contrast.py */
}

.terminal-muted { color: var(--text-secondary); }