/* HN Hotels Ops — Design Tokens
 * Mirrors the palette of the existing /ops/* pages so WebView tiles feel native.
 * Single source of truth. Every future tile type MUST consume these vars only —
 * no hex literals in tile CSS.
 */

:root {
  /* ─── Color system ─── */
  --bg:            #0c0c14;   /* app background */
  --bg-elev-1:     #12121b;   /* cards */
  --bg-elev-2:     #1a1a26;   /* popovers, inputs */
  --bg-elev-3:     #242236;   /* hover, active */
  --surface:       var(--bg-elev-1);

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --divider:       rgba(255,255,255,0.05);

  --text:          #f5f5fa;
  --text-dim:      #9ca3af;
  --text-mute:     #6b7280;
  --text-faint:    #4b5563;

  /* ─── Brand accents (the 3 entities) ─── */
  --hn:            #3b82f6;   /* HN navy/blue */
  --hn-soft:       rgba(59,130,246,0.12);
  --hn-ring:       rgba(59,130,246,0.35);

  --he:            #ef4444;   /* Hamza red */
  --he-soft:       rgba(239,68,68,0.12);
  --he-ring:       rgba(239,68,68,0.35);

  --nch:           #c08457;   /* Nawabi bronze */
  --nch-soft:      rgba(192,132,87,0.14);
  --nch-ring:      rgba(192,132,87,0.4);

  /* ─── Semantic ─── */
  --success:       #10b981;
  --success-soft:  rgba(16,185,129,0.12);
  --warning:       #f59e0b;
  --warning-soft:  rgba(245,158,11,0.12);
  --danger:        #ef4444;
  --danger-soft:   rgba(239,68,68,0.12);
  --info:          #06b6d4;
  --info-soft:     rgba(6,182,212,0.12);

  /* ─── Spacing scale (4/8/12/16/20/24/32/40/56) ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ─── Radius ─── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ─── Typography scale ─── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-body: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-h3:   24px;
  --fs-h2:   30px;
  --fs-h1:   36px;
  --fs-hero: 48px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ─── Elevation ─── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.3);

  /* ─── Animation ─── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
  --med: 240ms;
  --slow: 400ms;

  /* ─── Layout ─── */
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --safe-top:    env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --max-w:       640px;  /* mobile-first, cap on desktop */
}

/* CRITICAL: `hidden` attribute must ALWAYS win over display rules.
 * Without this, `#boot { display: grid }` beats the user-agent `[hidden] { display: none }`
 * and the boot screen never disappears. This rule is load-bearing — don't remove. */
[hidden] { display: none !important; }

/* Brand-scoped helper: any element with data-brand="he|nch|hn" inherits accent */
[data-brand="hn"]  { --accent: var(--hn);  --accent-soft: var(--hn-soft);  --accent-ring: var(--hn-ring);  }
[data-brand="he"]  { --accent: var(--he);  --accent-soft: var(--he-soft);  --accent-ring: var(--he-ring);  }
[data-brand="nch"] { --accent: var(--nch); --accent-soft: var(--nch-soft); --accent-ring: var(--nch-ring); }