/* ============================================================
   WATCHFLOW DESIGN SYSTEM — MARKETING SITE
   ------------------------------------------------------------
   Loaded on every public marketing page immediately AFTER
   /marketing/shared.css, which is the marketing site's whole
   stylesheet (3,227 lines) and the source of its :root tokens.

   WHY A TOKEN OVERRIDE AND NOT A REWRITE
   shared.css already reads everything from custom properties —
   --gold, --bg-*, --white, --muted — and it already uses the
   Absans stack. Re-pointing those tokens moves the entire
   marketing site onto the brand in one file, with no markup
   changes across 105 pages and no risk of breaking layout.

   WHAT CHANGES
   The marketing site had been running a separate "titanium"
   palette (--gold: #7d97b3) adopted 2026-05-18 as a deliberate
   split from the in-app identity. That split is what made the
   product and the site look like two different companies. Both
   now run the locked brand:

     Black  #000000   Gold  #c9a96e   White  #ffffff   Absans

   Selectors here match shared.css's own specificity (:root and
   [data-theme="light"]); this file simply loads later.
   ============================================================ */

/* ---------- DARK (the marketing default) -------------------
   Gold reads 9.38:1 on black — the identity at full strength.
   ------------------------------------------------------------ */
:root {
  --bg-void:   #000000;
  --bg-base:   #0c0c0c;
  --bg-raised: #121212;
  --bg-panel:  #1c1c1c;
  --bg-hover:  #1c1c1c;
  --bg-active: #262626;

  --border:       #262626;
  --border-light: #383838;

  --gold:        #c9a96e;
  --gold-bright: #dcc08a;
  --gold-dim:    color-mix(in srgb, #c9a96e 16%, transparent);

  --white:     #ffffff;
  --off-white: #c4c4c4;
  --muted:     #9a9a9a;   /* 7.46:1 on black */
  --faint:     #6b6b6b;   /* decorative only */

  --green: #4cb87a;  --green-dim: rgba(76,184,122,.12);
  --red:   #e07a7a;  --red-dim:   rgba(224,122,122,.12);
  --amber: #d9a748;  --amber-dim: rgba(217,167,72,.12);
  --blue:  #74a4d8;  --blue-dim:  rgba(116,164,216,.12);
}

/* ---------- LIGHT ------------------------------------------
   shared.css uses --gold for BOTH text accents and fills, so on
   a light ground it has to be a colour that can carry text.
   Raw #c9a96e is 2.24:1 on white and cannot. --gold here is the
   deepened brand gold (4.83:1); the pure brand value is kept
   available as --gold-pure for fills and marks.
   ------------------------------------------------------------ */
[data-theme="light"] {
  --bg-void:   #fafafa;
  --bg-base:   #f4f4f4;
  --bg-raised: #ffffff;
  --bg-panel:  #ffffff;
  --bg-hover:  #f4f4f4;
  --bg-active: #ebebeb;

  --border:       #e4e4e4;
  --border-light: #cfcfcf;

  --gold:        #8a6a2f;
  --gold-bright: #6f5222;
  --gold-pure:   #c9a96e;
  --gold-dim:    color-mix(in srgb, #c9a96e 16%, transparent);

  --white:     #000000;   /* legacy name = ink */
  --off-white: #3d3d3d;
  --muted:     #5f5f5f;   /* 6.39:1 on white */
  --faint:     #8a8a8a;

  --green: #1f7a45;  --green-dim: rgba(31,122,69,.10);
  --red:   #a32b2b;  --red-dim:   rgba(163,43,43,.10);
  --amber: #8a6210;  --amber-dim: rgba(138,98,16,.10);
  --blue:  #2b5c8a;  --blue-dim:  rgba(43,92,138,.10);
}

/* ============================================================
   UNDEFINED TOKENS WITH OFF-BRAND FALLBACKS
   ------------------------------------------------------------
   A scan of all 116 marketing pages found 19 custom properties
   that are USED but never DEFINED, so each silently fell back
   to a hardcoded literal — and most of those literals were the
   old titanium palette. This was invisible in code review
   because `var(--si, #3f6486)` looks token-driven.

   Two real defects it caused:
     · --bg-card fell back to #11161f, painting pricing's
       "teams" cards near-black. In the light theme the ink is
       also near-black, so that copy was black-on-black at
       1.16:1 — unreadable, and it pre-dated this redesign.
     · --si / --ta / --fc fell back to titanium blues, which is
       why a blue "Start free" CTA survived the retone.

   Defining them here fixes every page at once.
   ============================================================ */
:root,
[data-theme="light"] {
  --bg-card:    var(--bg-raised);
  --text-muted: var(--muted);
  --font-sans:  var(--font-body);

  /* decorative accents on the home-page feature tiles */
  --fc:  var(--gold);        /* feature accent           */
  --ta:  var(--gold);        /* tile top accent bar      */
  --si:  var(--gold);        /* stat icon                */
  --sit: var(--gold-dim);    /* stat icon tint           */
  --sd:  var(--border);      /* stat divider             */
  --sb:  var(--bg-raised);   /* stat background          */
  --c:   var(--muted);       /* generic secondary        */
}

/* ============================================================
   TYPOGRAPHY — the weight ladder, restored
   ------------------------------------------------------------
   Same root cause as the app: Absans ships ONE weight, and the
   old @font-face declared it `font-weight: 100 900`, so the
   browser never synthesised bold and every heading rendered as
   Regular. Re-declaring it honestly at 400 lets the whole
   ladder resolve — in the brand face.
   ============================================================ */
@font-face {
  font-family: 'Absans';
  src: url('/fonts/absans/Absans-Regular.woff2') format('woff2'),
       url('/fonts/absans/Absans-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--white);
}
h1 { letter-spacing: -0.028em; }

/* Hero display type earns real scale and real weight */
.v3-hero h1,
.hero h1,
.hero-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Eyebrows / kickers — the marketing echo of the app's fine print */
.eyebrow, .kicker, .section-eyebrow, .v3-chip-brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Body copy never runs the full width of a wide screen */
p { line-height: 1.6; }
.lead, .hero p, .v3-hero p { max-width: 62ch; }

/* ---------- THE WORDMARK — locked brand rule ---------------
   WATCH gold, FLOW white on dark grounds. The marketing nav and
   footer are dark in both themes, so FLOW is literal white
   there rather than the theme's ink token.
   ------------------------------------------------------------ */
.wm-watch { color: var(--gold) !important; }
.wm-flow  { color: var(--white) !important; }
.nav .wm-flow,
.footer .wm-flow,
.footer-brand .wm-flow,
.mobile-menu .wm-flow { color: #ffffff !important; }
.nav .wm-watch,
.footer .wm-watch,
.footer-brand .wm-watch,
.mobile-menu .wm-watch { color: #c9a96e !important; }

/* ============================================================
   BUTTONS — one system, matching the app
   Primary is a gold fill with BLACK text (9.38:1). White on
   gold measures 3.6:1 and fails, so it is never used.
   ============================================================ */
.btn, .btn-primary, .btn-gold, .cta, .cta-primary {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 7px;
  transition: background 150ms cubic-bezier(.2,.7,.2,1),
              border-color 150ms cubic-bezier(.2,.7,.2,1),
              color 150ms cubic-bezier(.2,.7,.2,1),
              transform 150ms cubic-bezier(.2,.7,.2,1);
}
.btn-primary, .btn-gold, .cta-primary {
  background: #c9a96e !important;
  border: 1px solid #c9a96e !important;
  color: #000000 !important;
  background-image: none !important;   /* kill legacy gradients */
}
.btn-primary:hover, .btn-gold:hover, .cta-primary:hover {
  background: #dcc08a !important;
  border-color: #dcc08a !important;
  color: #000000 !important;
  transform: translateY(-1px);
}
.btn-secondary, .btn-outline, .cta-secondary {
  background: transparent !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
}
.btn-secondary:hover, .btn-outline:hover, .cta-secondary:hover {
  border-color: var(--gold) !important;
}

/* ---------- Focus: the same gold ring as the app ------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,169,110,.45);
  border-radius: 5px;
}

/* ---------- Forms ------------------------------------------- */
.form-input, input[type="text"], input[type="email"], textarea, select {
  font-family: var(--font-body);
  font-size: 16px;                      /* prevents iOS zoom */
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  color: var(--white);
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,110,.45);
}

/* ---------- Cards / panels ---------------------------------- */
.card, .v3-pillar, .pricing-card, .feature-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pricing-card.is-featured,
.pricing-card.featured {
  border-color: var(--gold-pure, #c9a96e) !important;
}

/* ---------- Links -------------------------------------------- */
a { color: var(--gold); }
a:hover { color: var(--gold-bright); }
/* Nav and footer links stay ink/white — only accents are gold */
.nav-links li a, .footer a, .mm-item { color: var(--off-white); }
.nav-links li a:hover, .footer a:hover, .mm-item:hover { color: var(--gold); }

/* ---------- Section rhythm ---------------------------------- */
.section-title, .v3-section-title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- The index rule, echoed from the app -------------
   The same gold tick that marks a page title in the product,
   so the site and the app read as one system.
   ------------------------------------------------------------ */
.section-head::after,
.v3-section-head::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--gold-pure, #c9a96e);
  border-radius: 1px;
  margin-top: 14px;
}

/* ============================================================
   CONTRAST CORRECTIONS — measured, not assumed
   ------------------------------------------------------------
   Found by sweeping the live page with an alpha-compositing
   WCAG audit. Each of these is a real defect, and all of them
   pre-date this redesign:

     .cmp-h-pop   white on the gold badge      1.17:1
     .billing-label  grey on the grey toggle   1.35:1
     .hv1-tag     40%-alpha ink on light       2.53:1
     --faint used for real body copy           3.31:1

   --faint is the root cause of most of them: the marketing
   pages reach for it as a body-copy colour, but it is meant for
   decoration. Raising it to a value that clears 4.5:1 on every
   marketing surface fixes the whole family at once.
   ============================================================ */
[data-theme="light"] { --faint: #6e6e6e; }   /* 5.10 white · 4.89 canvas · 4.64 base */
:root                { --faint: #8a8a8a; }   /* 6.08 on black · 5.43 on raised       */

/* Black on the gold badge — 9.38:1, and the brand's own pairing */
.cmp-h-pop,
.plan-badge,
.badge-popular,
.most-popular {
  background: var(--gold-pure, #c9a96e) !important;
  color: #000000 !important;
  font-weight: 600;
}

/* The billing toggle is a control: the selected side is ink,
   the other is muted — never grey-on-grey. */
.billing-label { color: var(--muted) !important; }
.billing-label.active { color: var(--white) !important; font-weight: 600; }

/* Hero kicker was a 40%-alpha ink literal */
.hv1-tag { color: var(--muted) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}