/*
  YOUR APP'S THEME — start here.

  Brand your app by editing this file. @elements/style ships neutral
  (monochrome) defaults; everything here overrides them, everywhere (this file
  is imported by both page.css and email.css).

  The whole guide, from one accent to a full brand ramp, plus the token
  vocabulary (text, surfaces, status colors, spacing, radius):

    elements doc @elements/style/theming     how theming works
    elements doc @elements/style/tokens       every token you can set
    elements doc -s <anything>                search the style docs

  The short version: pick your brand color in the ramp below; the accent
  tokens point into it; every button, link, focus ring — and the hero word on
  the home page — follows. Dark mode is automatic: use tokens, never raw hex,
  and it comes out right in both modes.
*/

:root {
  /* ─── Brand ramp ─────────────────────────────────────────────────────────
     Your brand color on a light→dark scale, in OKLCH: lightness, chroma, hue.
     Keep one hue (243 here) and let lightness/chroma ride the curve. Ships as
     a blue — replace with your own. 500 is the pure brand color; darker steps
     climb to 900/950, lighter steps drop to 50. */
  --brand-50:   oklch(0.97 0.018 243);
  --brand-100:  oklch(0.93 0.038 243);
  --brand-200:  oklch(0.87 0.065 243);
  --brand-300:  oklch(0.80 0.098 243);
  --brand-400:  oklch(0.76 0.118 243);
  --brand-500:  oklch(0.704 0.128 243);
  --brand-600:  oklch(0.64 0.134 243);
  --brand-700:  oklch(0.576 0.131 243);
  --brand-800:  oklch(0.48 0.115 243);
  --brand-900:  oklch(0.38 0.095 243);
  --brand-950:  oklch(0.24 0.065 243);

  /* ─── Accent ─────────────────────────────────────────────────────────────
     The single brand color the whole system reads. Repoint these at your ramp
     (already done below) and everything accent-colored follows at once. */
  --accent:       var(--brand-500);   /* the pure brand color — matches the favicon */
  --accent-deep:  var(--brand-700);   /* hover / pressed / gradient end */
  --accent-soft:  var(--brand-50);    /* tinted accent backgrounds */
  --accent-ink:   #ffffff;            /* text + icons sitting on an --accent fill */
  --accent-edge:  var(--brand-200);   /* accent borders on tinted surfaces */

  /* ─── Fonts ──────────────────────────────────────────────────────────────
     Self-host woff2 files in this folder (@font-face here), then point these
     at your families. */
  /* --font-sans:  "Your Sans", ui-sans-serif, system-ui, sans-serif; */
  /* --font-mono:  "Your Mono", ui-monospace, monospace; */

  /* ─── Brand credit (used by the footer + email) ──────────────────────────── */
  /* --brand-name:   "Your Company"; */
  /* --brand-email:  "hello@yourcompany.com"; */
}