/*
  Sukhi Landing Page Tokens
  Cloned by hand from src/theme/tokens.js — this is a static site with no
  build step, so these values can't be imported directly. If tokens.js
  changes, update the matching values here.
  Last synced: 2026-07-14

  Scope: only the values landing pages actually reuse from the app
  (buttons, type, spacing, radius, core neutrals/brand color). Marketing
  pages are free to introduce their own colors and styles beyond this —
  this file isn't meant to constrain every design decision, just avoid
  reinventing the basics.
*/

:root {
  /* Brand — src/theme/tokens.js → brand */
  --sukhi-primary: #086a6b;
  --sukhi-primary-dark: #065758;
  --sukhi-primary-bg: #e0f5f4;

  /* Text — src/theme/tokens.js → text */
  --sukhi-ink: #18181a;
  --sukhi-mid: #5a5855;
  --sukhi-faint: #8a8a8a;
  --sukhi-on-dark: #ffffff;

  /* Backgrounds — src/theme/tokens.js → bg */
  --sukhi-bg-page: #f8fafb;
  --sukhi-bg-card: #ffffff;

  /* Borders — src/theme/tokens.js → border */
  --sukhi-border: #e5e7eb;

  /* Radius — src/theme/tokens.js → radius */
  --sukhi-radius-pill: 100px;
  --sukhi-radius-card: 28px;
  --sukhi-radius-sm: 8px;

  /* Type — src/theme/tokens.js → font */
  --sukhi-font-sans: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Shadow — src/theme/tokens.js → shadow */
  --sukhi-shadow-btn: 0px 6px 16px rgba(8, 106, 107, 0.30);

  /* ---------------------------------------------------------------------
     Marketing-only additions — NOT in tokens.js, invented for landing
     pages specifically. Keep additions here intentional and named, not
     scattered as raw hex values in page CSS.
  --------------------------------------------------------------------- */
  --sukhi-lp-emphasis: #c1541f; /* warm terracotta — reserved for rare, single-moment emphasis (e.g. a delayed color-reveal on scroll). Not a second brand color — do not use for buttons/links. */
}