/* ─────────────────────────────────────────────────────────────────────────
 * BaliBetween design system — canonical token stylesheet
 *
 * TWO LAYERS, and the order is deliberate.
 *
 * 1. OpenDesign contract layer (below, first).
 *    These 56 names are the OpenDesign design-system token contract
 *    (26 A1-identity/A1-structure + 26 A2 + 4 B-slot). They carry the LITERAL
 *    values, because OpenDesign's token binder reads this file and will
 *    otherwise re-guess any token it cannot resolve from a literal.
 *
 *    Phase-0 finding: the previous revision declared only `--bb-*` names and
 *    satisfied 0 of 56 required tokens. An unguided import therefore replaced
 *    the brand ink (#1f2723) with a generic near-black (#111827), injected an
 *    Inter font stack the brand never chose, and DROPPED the warm clay and the
 *    deep accent entirely. That is a brand-fidelity defect and a release-
 *    blocking "AI smell" risk, so the contract layer is now authored
 *    explicitly rather than left to a fallback guess.
 *
 * 2. BaliBetween brand vocabulary (second).
 *    `--bb-*` names are retained for BaliBetween components and copy, but they
 *    ALIAS the contract layer rather than restating values. One literal per
 *    value, so the two layers can never drift apart.
 *
 * Palette provenance: every colour below is either an original BaliBetween
 * brand value or a derived shade of one. Nothing was replaced with a generic
 * framework default. See ../../../../brand/DESIGN.md for the doctrine.
 *
 * NOTE ON FONTS (honest, interim): BaliBetween has not licensed a brand
 * typeface. Rather than let a framework default be injected silently, the
 * stacks below are deliberate dependency-free system stacks that honour the
 * DESIGN.md requirement for "restrained sans + optional editorial serif, no
 * techno/AI display fonts". Swapping in a licensed face is a one-line change
 * to --font-body / --font-display.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ═══ 1. OPENDESIGN CONTRACT LAYER ═══════════════════════════════════ */

  /* --- A1-identity: colour ------------------------------------------- */
  --bg: #f5f1e8;            /* warm paper */
  --surface: #fffdf8;       /* raised card / panel */
  --fg: #1f2723;            /* deep warm ink, NOT a neutral near-black */
  --muted: #677069;         /* secondary text */
  --border: #d8d3c7;        /* structural hairline */
  --accent: #315f50;        /* botanical green — primary brand accent */

  /* --- A1-identity: type ---------------------------------------------
     Each font stack MUST stay on ONE line and under ~120 characters.
     OpenDesign's extractor is /(--[a-zA-Z0-9-_]+)\s*:\s*([^;{}\n]+);/ and it
     discards any value longer than 120 characters. A wrapped stack therefore
     never matches, and OpenDesign silently substitutes its own default — which
     is how an earlier revision of this file shipped with the brand's type
     replaced by Inter while every check still reported success. */
  --font-display: "Iowan Old Style", Palatino, Georgia, "Noto Serif", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

  /* --- A1-structure: type scale -------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3rem;

  --leading-body: 1.6;
  --leading-tight: 1.2;
  --tracking-display: -0.01em;

  /* --- A1-structure: rhythm and grid --------------------------------- */
  --section-y-desktop: 7rem;
  --section-y-tablet: 4.5rem;
  --section-y-phone: 3.5rem;

  /*
   * 78rem, not 72. At 1440 the old cap left a 1152px column with a 144px margin either
   * side, which reads as a document rather than a designed page - everything crammed
   * into the middle with air that belongs to the browser, not to the composition.
   */
  --container-max: 78rem;
  /*
   * FLUID GUTTERS, AND MUCH WIDER AT THE TOP END.
   *
   * These were 32 / 24 / 16px - fixed, and too tight at every size. The complaint that
   * the page has "insufficient left/right breathing room" is a real measurement, not a
   * preference: at 1440 a 32px gutter against a full-bleed media band makes the text
   * grid look like it is apologising for its own margins, and at phone widths 16px puts
   * copy close enough to the edge that it reads as unfinished.
   *
   * The floor is what matters on small screens, where padding is width taken directly
   * from the reading column; the ceiling is what matters on wide ones, where padding is
   * the only thing separating a designed page from a stretched one. `clamp` lets those
   * two concerns have different answers instead of forcing one number to serve both.
   *
   * The full-bleed bands are deliberately exempt - see `band--bleed`. Imagery may touch
   * the viewport edge; text never should. That contrast is the point.
   */
  --container-gutter-desktop: clamp(2.5rem, 5vw, 5.5rem);
  --container-gutter-tablet: clamp(2rem, 4.5vw, 3.5rem);
  --container-gutter-phone: clamp(1.25rem, 5vw, 1.75rem);

  /* --- A2: reciprocal and interactive colour -------------------------- */
  --accent-on: #fffdf8;      /* text on an accent fill */
  --accent-hover: #23473c;   /* = brand accent-strong */
  --accent-active: #1b3730;  /* pressed; derived, darker than hover */
  --success: #2e654c;
  --warn: #8a6327;
  --danger: #8a302e;

  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- A2: spacing scale --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* --- A2: radius -----------------------------------------------------
     Near-sharp by direction, not by taste. REFERENCE_LOCK.md §7.2 requires
     "sharp or near-sharp geometry on consumer cards/media; no universal
     rounded-card system", and §7.6 says depth comes from scale, whitespace,
     border and surface shift rather than rounding. The earlier 12px card radius
     was generic rounded-card styling and read as exactly the default the lock
     rejects. --radius-pill stays large because it is used for small STATUS
     chips, which the lock does not restrict; it must not be used for cards. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* --- A2: elevation -------------------------------------------------- */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  /* No default elevation. REFERENCE_LOCK.md §7.6: "No heavy shadows. Depth
     comes from scale, whitespace, border, surface shift, and imagery." A
     two-layer soft card shadow was the single easiest way to drift back into
     generic SaaS styling, so the token exists (OpenDesign's contract requires
     it) but resolves to no shadow. Use --elev-ring or a surface shift instead. */
  --elev-raised: none;

  /* --- A2: focus, motion, easing -------------------------------------- */
  --focus-ring: 0 0 0 3px rgb(49 95 80 / 0.35);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --- B-slot: tiers a simple brand aliases --------------------------- */
  --surface-warm: #fbf6ef;   /* warm tint between --bg and --surface */
  --fg-2: #3d453f;           /* secondary foreground, ink -> muted */
  --meta: var(--muted);      /* metadata tier aliases secondary text */
  --border-soft: #e6e1d6;    /* lighter divider for dense blocks */

  /* ═══ 2. BALIBETWEEN BRAND VOCABULARY (aliases) ══════════════════════ */

  --bb-color-bg: var(--bg);
  --bb-color-surface: var(--surface);
  --bb-color-surface-warm: var(--surface-warm);
  --bb-color-ink: var(--fg);
  --bb-color-ink-2: var(--fg-2);
  --bb-color-muted: var(--muted);
  --bb-color-border: var(--border);
  --bb-color-border-soft: var(--border-soft);
  --bb-color-accent: var(--accent);
  --bb-color-accent-strong: var(--accent-hover);
  --bb-color-accent-active: var(--accent-active);
  --bb-color-accent-on: var(--accent-on);
  --bb-color-warm: #9a6749;  /* warm clay — BaliBetween brand extension,
                                intentionally outside the shared contract, and
                                NOT a default public-interface accent
                                (REFERENCE_LOCK.md §7 / docs/18). Reserved for
                                material warmth in imagery-adjacent surfaces. */
  --bb-color-danger: var(--danger);
  --bb-color-warning: var(--warn);
  --bb-color-success: var(--success);

  --bb-radius-sm: var(--radius-sm);
  --bb-radius-md: var(--radius-md);
  --bb-radius-lg: var(--radius-lg);

  --bb-space-1: var(--space-1);
  --bb-space-2: var(--space-2);
  --bb-space-3: var(--space-3);
  --bb-space-4: var(--space-4);
  --bb-space-6: var(--space-6);
  --bb-space-8: var(--space-8);
  --bb-space-12: var(--space-12);

  --bb-shadow-subtle: var(--elev-raised);
}

/* Respect the user's motion preference — MOTION.md requires state-communicating
   motion only, and reduced-motion users get none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}