/* Brand + design tokens — swap this file per project to rebrand. */
:root {
  /* surfaces */
  --color-bg:        #f7f8fa;
  --color-surface:   #ffffff;
  --color-surface-2: #f1f3f7;
  --color-surface-3: #e7eaf0;

  /* text */
  --color-fg:        #0f172a;
  --color-fg-muted:  #64748b;
  --color-fg-subtle: #94a3b8;
  --color-fg-invert: #f8fafc;

  /* lines */
  --color-border:        #e5e7eb;
  --color-border-strong: #cbd5e1;

  /* accents */
  --color-primary:        #4f46e5;
  --color-primary-hover:  #4338ca;
  --color-primary-soft:   #eef2ff;
  --color-primary-fg:     #ffffff;

  --color-accent:    #0ea5e9;
  --color-success:   #10b981;
  --color-success-soft: #ecfdf5;
  --color-warning:   #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-danger:    #ef4444;
  --color-danger-soft:  #fef2f2;

  /* sidebar / topbar */
  --color-sidebar-bg:        #0f172a;
  --color-sidebar-bg-2:      #1e293b;
  --color-sidebar-fg:        #cbd5e1;
  --color-sidebar-fg-muted:  #64748b;
  --color-sidebar-active-bg: rgba(255,255,255,.06);
  --color-sidebar-active-fg: #ffffff;
  --color-sidebar-accent:    #818cf8;

  /* fonts */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* Tightly-rounded radius for form inputs (text fields, selects, textareas)
     so input chrome reads as crisper than the cards/buttons that wrap them. */
  --radius-input: 4px;

  /* elevation */
  --shadow-xs: 0 1px 1px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 6px -2px rgba(15,23,42,.06), 0 8px 16px -4px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 28px -8px rgba(15,23,42,.12), 0 4px 12px -4px rgba(15,23,42,.08);

  /* spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 48px;
  --sp-12: 64px;
  --sp-16: 96px;

  /* misc */
  --transition: 150ms cubic-bezier(.2,.8,.2,1);
  --topbar-height: 56px;
  --sidebar-width: 248px;
}

/* ===========================================================================
   betonas palette — Slice 6.
   Scoped to `body:not(.admin)` so the admin keeps its slate/Ubuntu chrome
   intact. Token names mirror the prototype's `:root` block at
   docs/prototype/prototype/15-betonas/notes.md so site.css selectors can
   read them by their familiar names.
   =========================================================================== */
body:not(.admin) {
  /* betonas tokens (per docs/prototype/prototype/15-betonas/notes.md) */
  --bg:        #eeece8;
  --paper:     #fafaf7;
  --ink:       #1a1a18;
  --muted:     #6b6a64;
  --ice:       #c8c5bd;
  --ice-soft:  #dcd9d0;
  --ice-tint:  #e8e5dd;
  --blue:      #8a7a55;  /* warm sand/clay accent */
  --deep:      #3a342a;
  --line:      #d4d1c8;

  /* loft status text colours (matches the prototype) */
  --loft-available-fg: #4a6b4a;
  --loft-reserved-fg:  #8a6c2a;
  --loft-sold-fg:      #7a3a3a;

  /* Override the template's `--color-*` tokens so existing template
     classes (`.btn`, `.contact-form`, `.navbar`, etc.) inherit the
     betonas palette without per-selector rewrites. */
  --color-bg:        var(--bg);
  --color-surface:   var(--paper);
  --color-surface-2: var(--ice-soft);
  --color-surface-3: var(--ice-tint);
  --color-fg:        var(--ink);
  --color-fg-muted:  var(--muted);
  --color-fg-subtle: var(--ice);
  --color-fg-invert: var(--paper);
  --color-border:        var(--line);
  --color-border-strong: var(--ice);
  --color-primary:        var(--deep);
  --color-primary-hover:  var(--blue);
  --color-primary-soft:   var(--ice-tint);
  --color-primary-fg:     var(--paper);
  --color-accent:    var(--blue);
}