/* ============================================================================
   ETS staff app — UNIFIED LIGHT THEME (2026-05-16)
   Matches the customer-facing booking software (etspace-booking.pages.dev)
   so customers + staff experience the same brand.

   Single source of truth for design tokens.  Templates should reference these
   CSS variables rather than hardcoding colors; future tweaks (a different
   yellow shade, larger radius, etc.) become one-file changes.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --c-black:  #000;
  --c-white:  #fff;
  --c-yellow: #ffd60a;       /* primary accent — matches booking software exactly */
  --c-yellow-soft: #fff5b8;  /* subtle yellow surface (callouts, highlights) */

  /* ── Neutral scale ─────────────────────────────────────────────────────── */
  --c-gray-50:  #fafafa;
  --c-gray-100: #f4f4f4;
  --c-gray-200: #e5e5e5;
  --c-gray-300: #d4d4d4;
  --c-gray-400: #a3a3a3;
  --c-gray-500: #737373;
  --c-gray-700: #404040;
  --c-gray-800: #262626;
  --c-gray-900: #1a1a1a;

  /* ── Semantic surfaces ─────────────────────────────────────────────────── */
  --bg:        var(--c-white);
  --surface:   var(--c-gray-50);
  --surface2:  var(--c-gray-100);
  --surface3:  var(--c-gray-200);
  --card:      var(--c-white);
  --border:    var(--c-gray-200);
  --border2:   var(--c-gray-300);
  --rule:      var(--c-gray-100);

  /* ── Semantic text ─────────────────────────────────────────────────────── */
  --text:      var(--c-black);
  --muted:     var(--c-gray-500);
  --ink2:      var(--c-gray-700);
  --ink3:      var(--c-gray-400);

  /* ── Accent ────────────────────────────────────────────────────────────── */
  --accent:        var(--c-yellow);
  --accent2:       #f5c700;
  --accent-text:   var(--c-black);
  --accent-soft:   var(--c-yellow-soft);

  /* ── Status colors ─────────────────────────────────────────────────────── */
  --green:       #16a34a;
  --green-soft:  #dcfce7;
  --green-text:  #166534;
  --red:         #dc2626;
  --red-soft:    #fee2e2;
  --red-text:    #991b1b;
  --amber:       #d97706;
  --amber-soft:  #fef3c7;
  --amber-text:  #92400e;
  --blue:        #2563eb;
  --blue-soft:   #dbeafe;
  --blue-text:   #1e40af;
  --orange:      #ea580c;

  /* ── Legacy alias compat — older templates reference these names ──────── */
  --yellow:      var(--c-yellow);
  --yellow-dim:  #b89800;
  --yellow-warm: var(--c-yellow);
  --pink:        var(--c-yellow);    /* previous CEO theme used rose; map to yellow */
  --purple:      var(--c-yellow);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-sans);

  --fw-normal:     400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* ── Sizing ──────────────────────────────────────────────────────────────
     Booking-software brand language is editorial / brutalist-lite:
     ALL primitives rectangular (zero corner radius).  Pills/chips also
     square.  This is the single biggest "look" lever — any chamfer pushes
     us toward soft-SaaS away from the brand. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill: 0;

  /* Stroke — 2px black is the universal border across cards, buttons,
     inputs, chips. Replaces 1px gray hairlines. */
  --stroke:        2px solid var(--c-black);
  --stroke-grey:   2px solid var(--c-gray-300);
  --tracking-tight: -0.025em;
  --tracking-wide:  0.25em;

  --container-sm: 28rem;       /* 448px — matches booking software */
  --container-md: 40rem;       /* 640px */
  --container-lg: 56rem;       /* 896px */
  --container-xl: 72rem;       /* 1152px */

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --t: 0.15s cubic-bezier(.4, 0, .2, 1);

  /* ── Touch (Apple HIG) ───────────────────────────────────────────────── */
  --touch: 44px;
}

/* Force light scheme even when OS is in dark mode — brand cohesion */
:root { color-scheme: light; }

/* ── Base reset + body ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Body text sits at medium (500), matching booking software — heavier
     than typical default, lighter than headings. */
  font-weight: 500;
  line-height: 1.5;
}

/* ── Brand text-selection — yellow on black ─────────────────────────────── */
::selection { background: var(--c-yellow); color: var(--c-black); }

/* ── Eyebrow label utility — 10–11px, uppercase, 700, wide tracking ────── */
.eyebrow {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.25em; color: var(--muted);
}

/* ── Primary button — yellow fill, 2px black border, inverts on hover ─── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--stroke);
  background: var(--c-yellow); color: var(--c-black);
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.btn-primary:hover { background: var(--c-black); color: var(--c-yellow); }
.btn-primary:disabled,
.btn-primary.disabled {
  border-color: var(--c-gray-300);
  background: var(--c-gray-100);
  color: var(--c-gray-300);
  cursor: not-allowed;
}

/* ── Secondary button — white fill, hovers to yellow ───────────────────── */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--stroke);
  background: var(--c-white); color: var(--c-black);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.20em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t);
}
.btn-secondary:hover { background: var(--c-yellow); }

/* ── Page hero banner (used on header-wrapped pages) ─────────────────────── */
.page-hero {
  width: 100%;
  height: 130px;
  background: var(--surface) center / cover no-repeat;
  border-bottom: 1px solid var(--border);
}
.page-hero.contain {
  background-size: contain;
  background-color: var(--surface);
  padding: 0;
  height: 110px;
}
@media (min-width: 760px) {
  .page-hero { height: 180px; }
  .page-hero.contain { height: 140px; }
}