/**
 * JAIDS design tokens — shared by employee shell (www) and manager console (admin-web).
 * Themes: light/dark via :root[data-theme]. Accents: blue (default) | pink via data-accent.
 * Layout helpers target tablet (768), desktop (1024), wide (1280) and kiosk touch targets.
 * Import after fonts.css; do not duplicate these variables elsewhere.
 */

/* ── Typography stacks ─────────────────────────────────────────────── */
:root {
  --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Chakra Petch', 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 99px;
  --radius: var(--radius-lg);

  /* Touch / kiosk */
  --touch-min: 44px;
  --layout-max-phone: 560px;
  --layout-max-tablet: 960px;
  --layout-max-desktop: 1200px;
  --layout-max-wide: 1440px;

  /* Breakpoint references (for JS if needed) */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
}

/* ── Light theme (steel / navy surfaces) ───────────────────────────── */
:root[data-theme="light"] {
  --bg: #eef2f8;
  --ink: #0b1422;
  --ink2: #334155;
  --dim: #475569;
  --faint: #64748b;
  --glass: rgba(255, 255, 255, 0.88);
  --glassHi: rgba(255, 255, 255, 0.96);
  --glassEdge: rgba(15, 23, 42, 0.06);
  --line: rgba(15, 23, 42, 0.08);
  --line2: rgba(15, 23, 42, 0.14);
  --violet: #64748b;
  --rose: #e11d48;
  --gold: #b45309;
  --green: #059669;
  --red: #dc2626;
  --copper: #64748b;
  --scrim1: rgba(238, 242, 248, 0.45);
  --scrim2: rgba(238, 242, 248, 0.94);
  --shadow: 0 18px 48px -28px rgba(15, 23, 42, 0.28);
  --surface: #ffffff;
  --paper: #f8fafc;
  --card: #ffffff;
}

/* ── Dark theme ────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #070b14;
  --ink: #e8eef8;
  --ink2: #b6c2d6;
  --dim: #8494ad;
  --faint: #5a6a82;
  --glass: rgba(16, 22, 36, 0.82);
  --glassHi: rgba(255, 255, 255, 0.05);
  --glassEdge: rgba(120, 160, 220, 0.1);
  --line: rgba(120, 160, 220, 0.1);
  --line2: rgba(120, 160, 220, 0.18);
  --violet: #94a3b8;
  --rose: #fb7185;
  --gold: #f59e0b;
  --green: #34d399;
  --red: #f87171;
  --copper: #94a3b8;
  --scrim1: rgba(7, 11, 20, 0.5);
  --scrim2: rgba(7, 11, 20, 0.92);
  --shadow: 0 22px 56px -28px rgba(0, 0, 0, 0.7);
  --surface: #101826;
  --paper: #0c121e;
  --card: rgba(255, 255, 255, 0.04);
}

/* ── Accent: electric blue (default) ───────────────────────────────── */
:root[data-theme="light"][data-accent="blue"],
:root[data-theme="light"]:not([data-accent]) {
  --accent: #0077ee;
  --accent-2: #00c8ff;
  --cyan: #0077ee;
  --frost: #0077ee;
  --teal: #0090ff;
  --accent-grad: linear-gradient(135deg, #00c8ff 0%, #0077ee 48%, #0055cc 100%);
  --accent-soft: rgba(0, 119, 238, 0.12);
  --accent-mid: rgba(0, 119, 238, 0.28);
  --keybg: linear-gradient(180deg, #fff, #eef5ff);
  --keyedge: rgba(0, 119, 238, 0.32);
  --keyink: #0077ee;
}

:root[data-theme="dark"][data-accent="blue"],
:root[data-theme="dark"]:not([data-accent]) {
  --accent: #3db4ff;
  --accent-2: #6ae0ff;
  --cyan: #3db4ff;
  --frost: #3db4ff;
  --teal: #00d4ff;
  --accent-grad: linear-gradient(135deg, #6ae0ff 0%, #1a9fff 45%, #0066ff 100%);
  --accent-soft: rgba(61, 180, 255, 0.14);
  --accent-mid: rgba(61, 180, 255, 0.32);
  --keybg: linear-gradient(180deg, #152033, #0c1420);
  --keyedge: rgba(61, 180, 255, 0.35);
  --keyink: #3db4ff;
}

/* ── Accent: hot pink ──────────────────────────────────────────────── */
:root[data-theme="light"][data-accent="pink"] {
  --accent: #e91e8c;
  --accent-2: #ff5aad;
  --cyan: #e91e8c;
  --frost: #e91e8c;
  --teal: #ff4da6;
  --accent-grad: linear-gradient(135deg, #ff6bcb 0%, #e91e8c 50%, #c2185b 100%);
  --accent-soft: rgba(233, 30, 140, 0.12);
  --accent-mid: rgba(233, 30, 140, 0.28);
  --keybg: linear-gradient(180deg, #fff, #fff0f7);
  --keyedge: rgba(233, 30, 140, 0.32);
  --keyink: #e91e8c;
}

:root[data-theme="dark"][data-accent="pink"] {
  --accent: #ff4db8;
  --accent-2: #ff8ad4;
  --cyan: #ff4db8;
  --frost: #ff4db8;
  --teal: #ff6bcb;
  --accent-grad: linear-gradient(135deg, #ff8ad4 0%, #ff2d95 48%, #c2185b 100%);
  --accent-soft: rgba(255, 77, 184, 0.16);
  --accent-mid: rgba(255, 77, 184, 0.34);
  --keybg: linear-gradient(180deg, #24101c, #160a12);
  --keyedge: rgba(255, 77, 184, 0.38);
  --keyink: #ff4db8;
}

/* ── Semantic helpers ──────────────────────────────────────────────── */
:root {
  --jaids-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ── Layout: max-width containers ──────────────────────────────────── */
.jaids-layout-desktop {
  width: 100%;
  max-width: var(--layout-max-phone);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .jaids-layout-desktop {
    max-width: var(--layout-max-tablet);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .jaids-layout-desktop {
    max-width: var(--layout-max-desktop);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .jaids-layout-desktop {
    max-width: var(--layout-max-wide);
  }
}

/* ── Two-pane (tablet+) ────────────────────────────────────────────── */
.jaids-two-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

@media (min-width: 768px) {
  .jaids-two-pane {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-6);
  }

  .jaids-two-pane > .jaids-pane-nav,
  .jaids-two-pane > .jaids-pane-side {
    flex: 0 0 280px;
    max-width: 320px;
  }

  .jaids-two-pane > .jaids-pane-main {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .jaids-two-pane > .jaids-pane-nav,
  .jaids-two-pane > .jaids-pane-side {
    flex-basis: 300px;
  }
}

@media (min-width: 1280px) {
  .jaids-two-pane > .jaids-pane-nav,
  .jaids-two-pane > .jaids-pane-side {
    flex-basis: 320px;
  }
}

/* ── Kiosk / touch targets ─────────────────────────────────────────── */
.jaids-touch,
.jaids-btn-touch,
button.jaids-touch,
a.jaids-touch {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.jaids-input-touch {
  min-height: var(--touch-min);
  font-size: 16px; /* avoid iOS zoom */
}

@media (min-width: 1024px) {
  .jaids-kiosk .jaids-touch,
  .jaids-kiosk .jaids-btn-touch,
  .jaids-kiosk button.jaids-touch {
    min-height: 52px;
    min-width: 52px;
    font-size: 1.05rem;
  }
}