/* Theme — Award Row tokens (light mode retuned to a pure-white page background).
   Base scale ported from the "Award Row" tokens.json (v1) in Mousa's Cowork design library;
   the light surface swatches were retuned so the page canvas is #ffffff and every card is
   defined by its all-around 1px border, not by a fill contrast. Dark mode is unchanged. */

:root {
  /* Surfaces — warm cream, as in Award Row v1 (V2 of this site) */
  --surface-100: #fbf9f4;      /* page background — the warm cream you liked */
  --surface-200: #f2ecdf;      /* zebra rows, code blocks, section bands */
  --surface-card: #ffffff;     /* card / panel background — sits slightly lighter than the page for definition */

  /* Ink */
  --ink: #18150e;
  --ink-muted: #6b6252;
  --hairline: #e3dcc9;

  /* Brand teal — links, focus, technical accent */
  --brand-teal: #1f6f95;
  --brand-teal-strong: #124c66;

  /* Accent orange — one loud accent, conversion moments */
  --accent-orange: #d95d2b;
  --accent-orange-strong: #a8431c;

  /* Playful accents (used sparingly) */
  --accent-purple: #7a4fc2;
  --accent-pink: #d1508a;

  /* On-color text */
  --on-teal: #fbf9f4;
  --on-orange: #fbf9f4;

  /* Signal */
  --signal-error: #b3391f;

  /* Type families */
  --font-display: "Space Grotesk", "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #15130f;
    --surface-200: #201c15;
    --surface-card: #221f18;
    --ink: #f7f2e6;
    --ink-muted: #a89e88;
    --hairline: #332e23;
    --brand-teal: #5bb7dd;
    --brand-teal-strong: #8fd2ef;
    --accent-orange: #f08658;
    --accent-orange-strong: #f6a980;
    --accent-purple: #b795ef;
    --accent-pink: #ef8cb8;
    --on-teal: #0c2733;
    --on-orange: #2b1206;
    --signal-error: #ff8f6b;
  }
}
:root[data-theme="dark"] {
  --surface-100: #15130f;
  --surface-200: #201c15;
  --surface-card: #221f18;
  --ink: #f7f2e6;
  --ink-muted: #a89e88;
  --hairline: #332e23;
  --brand-teal: #5bb7dd;
  --brand-teal-strong: #8fd2ef;
  --accent-orange: #f08658;
  --accent-orange-strong: #f6a980;
  --accent-purple: #b795ef;
  --accent-pink: #ef8cb8;
  --on-teal: #0c2733;
  --on-orange: #2b1206;
  --signal-error: #ff8f6b;
}

/* Register the animated-border angle as a real CSS property so it can be animated
   as an angle rather than as a string. Falls back gracefully on browsers that don't
   support @property — the perimeter just doesn't rotate; the static border still shows. */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}