/* ==============================================================
   CitiAssist — Shared Design Tokens
   Derived from brand mark (red "C" wordmark) and kiosk welcome art.
   All three interfaces (admin / portal / kiosk) import this file.
   ============================================================== */

:root {
  /* --- Brand red family (primary/trust) --- */
  --ca-red-950: #4A0A0D;
  --ca-red-900: #6B0E12;
  --ca-red-800: #8C1216;
  --ca-red-700: #A9161A;
  --ca-red-600: #C41E24;   /* core brand red — matches logo */
  --ca-red-500: #DA2A2F;
  --ca-red-100: #FBE2E3;

  /* --- White / neutrals (clarity/space) --- */
  --ca-white: #FFFFFF;
  --ca-gray-50: #F7F7F8;
  --ca-gray-100: #EEEEF0;
  --ca-gray-200: #E1E2E5;
  --ca-gray-400: #9A9CA3;
  --ca-gray-600: #62636B;
  --ca-gray-800: #33343A;
  --ca-gray-900: #1C1D21;

  /* --- Gold accent (urgency/CTA — from "TAP anywhere to Start") --- */
  --ca-gold-600: #C4831E;
  --ca-gold-500: #E0A93C;
  --ca-gold-400: #F0BE5C;

  /* --- Status colors (identical across dashboard / portal / kiosk) --- */
  --status-pending:     #9A9CA3;
  --status-review:      #E0A93C;
  --status-approved:    #2E8B57;
  --status-processing:  #2563EB;
  --status-done:        #1A7A3C;
  --status-rejected:    #C41E24;

  /* --- Elevation / radius --- */
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 22px;
  --ca-shadow-sm: 0 1px 3px rgba(28,29,33,0.08);
  --ca-shadow-md: 0 6px 20px rgba(28,29,33,0.10);
  --ca-shadow-lg: 0 16px 40px rgba(74,10,13,0.18);

  /* --- Typography --- */
  --ca-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-body: clamp(1rem, calc(0.98rem + 0.2vw), 1.125rem);
  --font-size-secondary: clamp(0.875rem, calc(0.84rem + 0.15vw), 1rem);
  --touch-target-min: 44px;
  --kiosk-font-size-body: 1.375rem;
  --kiosk-touch-target-min: 60px;
  --ca-font-body: var(--font-size-body);
  --ca-font-secondary: var(--font-size-secondary);
  --ca-touch-target-min: var(--touch-target-min);

  /* --- Signature brand gradient (hero / idle screens) --- */
  --ca-gradient-hero: radial-gradient(circle at 30% 20%, var(--ca-red-700) 0%, var(--ca-red-900) 55%, var(--ca-red-950) 100%);
}

* { box-sizing: border-box; }
body { font-family: var(--ca-font); margin: 0; color: var(--ca-gray-900); background: var(--ca-gray-50); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Reusable hexagon watermark pattern used across hero/idle screens */
.ca-hex-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 42px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 42px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 42px);
  pointer-events: none;
}

/* Status pill — shared component styling */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--font-size-secondary);
  font-weight: 600;
  color: var(--ca-white);
  white-space: nowrap;
}
.status-pending    { background: var(--status-pending); }
.status-review     { background: var(--status-review); color: #3A2A00; }
.status-approved   { background: var(--status-approved); }
.status-processing { background: var(--status-processing); }
.status-done       { background: var(--status-done); }
.status-rejected   { background: var(--status-rejected); }

/* Toast notification */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 260px; padding: 14px 18px; border-radius: var(--ca-radius-sm); box-shadow: var(--ca-shadow-md); color: var(--ca-white); font-size: 14px; font-weight: 500; animation: ca-toast-in 0.25s ease; }
.toast.success { background: var(--status-approved); }
.toast.error { background: var(--ca-red-600); }
.toast.info { background: var(--status-processing); }
@keyframes ca-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }