/* Design tokens: the single source of truth for colour, spacing, type, radius
 * and elevation. Loaded by BOTH the customer site (base.html) and the staff
 * admin (base_admin.html), so changing a value here updates every page.
 *
 * Rules:
 *   - Never write a raw colour, spacing step, radius or shadow in a stylesheet.
 *     Add or reuse a token instead.
 *   - Prefer a semantic token (--color-danger) over a palette token
 *     (--red-600) in component code, so a palette change cannot silently change
 *     meaning.
 */

:root {
  /* ---------------------------------------------------------------- palette */
  /* Warm neutral/gold brand ramp, matching the existing live site. */
  --gold-50:  #fdf7e6;
  --gold-100: #fbf1dc;
  --gold-200: #f9f2e0;
  --gold-300: #e3d09a;
  --gold-400: #e7d9ad;
  --gold-500: #c8a951;
  --gold-600: #a8871e;
  --gold-700: #8a6d3b;

  /* Warm stone borders used for card and section outlines. */
  --stone-100: #f8f6f1;
  --stone-200: #f1ecdd;
  --stone-300: #eee7d6;
  --stone-400: #e5e0d5;
  --stone-500: #d8cdb4;

  /* Ink (warm near-black) through to page cream. */
  --ink-900: #1b160d;
  --ink-800: #1b1b18;
  --ink-700: #3a3226;
  --ink-600: #4a4a44;
  --ink-500: #6b6b63;
  --ink-400: #9a9a90;
  --ink-300: #b8b8af;
  --ink-200: #d8d8d0;
  --ink-100: #e5e5e0;
  --ink-50:  #f0efe9;

  /* Surfaces. The near-whites used to be five different hex values; they are
     now three intentional steps. */
  --paper:      #ffffff;
  --paper-soft: #faf9f5;
  --paper-mute: #f5f3ee;
  --cream:      #faf6ee;

  --green-50:  #e7f6ee;
  --green-700: #14683f;
  --amber-50:  #fdf3f3;
  --amber-700: #8a3b3b;
  --red-50:    #fdeaea;
  --red-100:   #fbeae8;
  --red-700:   #a5342e;
  --red-800:   #b91c1c;
  --blue-500:  #94a3b8;

  /* ------------------------------------------------------------- semantic */
  --color-text:        var(--ink-900);
  --color-text-soft:   var(--ink-700);
  --color-text-muted:  var(--ink-500);
  --color-text-faint:  var(--ink-400);

  --color-brand:       var(--gold-500);
  --color-brand-dark:  var(--gold-600);
  --color-brand-link:  var(--gold-700);

  --color-bg:          var(--paper);
  --color-bg-soft:     var(--paper-soft);
  --color-bg-mute:     var(--paper-mute);
  --color-bg-cream:    var(--cream);

  --color-border:      var(--ink-100);
  --color-border-soft: var(--ink-50);
  --color-border-strong: var(--ink-200);

  --color-danger:      var(--red-800);
  --color-danger-soft: var(--red-50);
  --color-danger-bg:   var(--red-100);
  --color-danger-text: var(--red-700);

  --color-success:     var(--green-700);
  --color-success-soft: var(--green-50);

  --color-warning:     var(--amber-700);
  --color-warning-soft: var(--amber-50);

  --color-available:   #10b981;
  --color-booked:      #ef4444;
  --color-closed:      var(--blue-500);

  /* ------------------------------------------------------------- spacing */
  /* A single 4px-based ramp. */
  --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-10: 2.5rem;
  --space-12: 3rem;

  /* Height of the fixed top navigation (the site-nav row), from the viewport
     top to its bottom edge: .75rem row padding + 2.75rem wordmark. Sticky
     elements offset by this so they never scroll under the wordmark. */
  --site-nav-height: 3.5rem;

  /* ---------------------------------------------------------------- type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.7rem;
  --text-sm:   0.82rem;
  --text-base: 0.9rem;
  --text-md:   1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.6rem;
  --text-2xl:  2rem;

  --leading-tight: 1.25;
  --leading-base:  1.5;
  --leading-loose: 1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --tracking-wide: 0.08em;

  /* --------------------------------------------------------------- shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(27, 22, 13, 0.05);
  --shadow-md: 0 2px 10px rgba(27, 22, 13, 0.08);
  --shadow-lg: 0 8px 28px rgba(27, 22, 13, 0.14);

  /* --------------------------------------------------------------- layout */
  --page-max: 72rem;
  --content-max: 52rem;
  --measure: 66ch;

  --bp-sm: 640px;
  --bp-md: 820px;
  --bp-lg: 900px;
}