/**
 * tokens.css — Playa eBikes design tokens (Brand theme).
 *
 * Single source of truth for color / shape / type. Reference everything via
 * var(--…); never hardcode a hex that has a token (DS Golden Rule #3).
 *
 * Promoted to :root. The mockups scoped these to `body.theme-brand` only so the
 * preview could swap between three skins via a toggle; the live site ships the
 * one Brand look, so the tokens live on :root.
 *
 * Spec: build-guide/00-DESIGN-SYSTEM.md §2.
 *
 * @package bricks-child
 */

:root{
  /* Surfaces */
  --bg:#faf6f0;            /* page background (warm off-white) */
  --surface:#ffffff;       /* cards, panels */
  --surface-2:#f4ede3;     /* tinted sections, inset fields, subtle fills */
  --border:#e8ddcf;        /* hairline borders / dividers */

  /* Text */
  --ink:#2a2320;           /* primary text (near-black warm) */
  --muted:#6e6358;         /* secondary text, captions */

  /* Brand accent (the orange) */
  --accent:#e0531f;        /* primary buttons, key accents */
  --accent-ink:#ffffff;    /* text on accent */
  --accent-strong:#b23e10; /* darker orange: links, icon glyphs, hover */

  /* Dark "bands" (footer, proof band, announcement bar) */
  --band-bg:#241d1a;       /* dark warm-brown band background */
  --band-surface:#332925;  /* cards inside a dark band */
  --band-ink:#f7f1ea;      /* text on dark band */
  --band-muted:#c6b8aa;    /* secondary text on dark band */

  /* Status */
  --ok:#2e7d52;            /* success / in-stock green */
  --ok-bg:#e7f3ec;         /* success chip background */
  --star:#dd8a18;          /* review stars */

  /* Shape */
  --radius:14px;           /* default corner radius (cards, inputs) */
  --radius-lg:20px;        /* large radius (hero photo, big panels) */

  /* Type */
  --hfont:"Helvetica Neue",-apple-system,system-ui,Arial,sans-serif;  /* headings + prices */
  --bfont:-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif; /* body */

  /* Effects */
  --hero-grad:linear-gradient(135deg,#e0531f 0%,#f0962f 60%,#f4c95b 100%); /* CTA band, logo mark */
  --photo-grad:linear-gradient(135deg,#3a2c24,#7a4a2a 55%,#e0902f);        /* image placeholder fallback */
  --shadow:0 18px 50px rgb(42 35 32 / 14%);    /* raised cards / hero photo */
  --shadow-sm:0 4px 14px rgb(42 35 32 / 8%);   /* subtle card lift */
}