/* ReserveDesk Design Tokens
 * Single source of truth for color, typography, spacing, and motion across:
 *   - reservedesk-website (this repo)
 *   - messenger-mvp/admin-dashboard.html
 *   - messenger-mvp/super-admin.html
 *
 * Provenance: extracted from admin-dashboard.html, super-admin.html, and
 * reservedesk-website/assets/css/styles.css on 2026-06-29.
 *
 * Brand decision: teal #2dd4bf (website palette) — more distinctive than the
 * admin portal's iOS blue, and already the primary on the public marketing
 * site customers see first.
 *
 * Typography decision: Manrope (body) + Sora (display) — already loaded on
 * the website; admin portals will adopt these to match brand voice.
 */

:root {
  /* ── BRAND ─────────────────────────────────────────────────────────── */
  --brand-primary: #2dd4bf;
  --brand-primary-strong: #14b8a6;
  --brand-primary-soft: rgba(45, 212, 191, 0.12);
  --brand-on-primary: #03211d;

  --accent-coral: #fb7185;

  /* ── SURFACE (light mode default) ──────────────────────────────────── */
  --surface-base: #f5f5f7;
  --surface-raised: #ffffff;
  --surface-sunken: #e9ebf1;
  --surface-glass: rgba(255, 255, 255, 0.82);

  /* ── INK / TEXT ────────────────────────────────────────────────────── */
  --text-strong: #1d1d1f;
  --text-muted: #6e6e73;
  --text-on-dark: #f4fbff;
  --text-on-dark-muted: #9bb1d8;

  /* ── SEMANTIC ──────────────────────────────────────────────────────── */
  --semantic-success: #1d7f43;
  --semantic-success-bg: rgba(29, 127, 67, 0.10);
  --semantic-danger: #c62828;
  --semantic-danger-bg: rgba(198, 40, 40, 0.08);
  --semantic-warning: #f8b84f;
  --semantic-warning-bg: rgba(248, 184, 79, 0.12);
  --semantic-info: #0071e3;
  --semantic-info-bg: rgba(0, 113, 227, 0.10);

  /* ── NEUTRAL SCALE ─────────────────────────────────────────────────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f7;
  --neutral-200: #e9ebf1;
  --neutral-300: #d2d2d7;
  --neutral-400: #a8a8ae;
  --neutral-500: #8a8a8f;
  --neutral-600: #6e6e73;
  --neutral-700: #515154;
  --neutral-800: #3a3d45;
  --neutral-900: #1d1d1f;

  --line: #d2d2d7;

  /* ── TYPOGRAPHY ────────────────────────────────────────────────────── */
  --font-display: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3.15rem;   /* ~50px */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.09em;

  /* ── SPACING (8px grid) ────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.5rem;   /*  8 */
  --space-2:  1rem;     /* 16 */
  --space-3:  1.5rem;   /* 24 */
  --space-4:  2rem;     /* 32 */
  --space-5:  2.5rem;   /* 40 */
  --space-6:  3rem;     /* 48 */
  --space-7:  3.5rem;   /* 56 */
  --space-8:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */

  /* ── RADIUS ────────────────────────────────────────────────────────── */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 999px;

  /* ── SHADOWS ───────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 44px rgba(0, 0, 0, 0.12);

  /* ── Z-INDEX LADDER ────────────────────────────────────────────────── */
  --z-dropdown:        10;
  --z-sticky:          20;
  --z-fixed:           30;
  --z-modal-backdrop: 1000;
  --z-modal:          1010;
  --z-popover:        1100;
  --z-toast:          1200;
  --z-tooltip:        1300;

  /* ── MOTION ────────────────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
}

/* ── DARK MODE OVERRIDES ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-base: #0f1115;
    --surface-raised: #1c1e24;
    --surface-sunken: #1a1d23;
    --surface-glass: rgba(40, 42, 48, 0.72);

    --text-strong: #f2f3f5;
    --text-muted: #9a9ba0;

    --semantic-success: #4ec57b;
    --semantic-success-bg: rgba(78, 197, 123, 0.14);
    --semantic-danger: #ff6b6b;
    --semantic-danger-bg: rgba(255, 107, 107, 0.14);
    --semantic-info: #4a9eff;
    --semantic-info-bg: rgba(74, 158, 255, 0.14);

    --line: #3a3d45;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 24px 44px rgba(0, 0, 0, 0.45);
  }
}