/* ============================================================
   Design tokens — Meiden Training Hub product UI
   Brand mark colors (gold/navy) live only on /applicant.
   ============================================================ */
:root {
  /* Surfaces — tinted toward cool blue (chroma ~0.008) */
  --bg:           oklch(18% 0.008 250);  /* page */
  --bg-elev-1:    oklch(22% 0.008 250);  /* panel */
  --bg-elev-2:    oklch(25% 0.008 250);  /* nested, sticky header */
  --bg-elev-3:    oklch(28% 0.010 250);  /* hover row */

  /* Borders */
  --border:       oklch(30% 0.010 250);
  --border-strong:oklch(38% 0.012 250);

  /* Text */
  --text:         oklch(94% 0.005 250);
  --text-muted:   oklch(70% 0.008 250);
  --text-faint:   oklch(55% 0.010 250);

  /* Accent — single blue, used for primary CTA + current selection only */
  --accent:       oklch(68% 0.16 252);
  --accent-hover: oklch(73% 0.16 252);
  --accent-fg:    oklch(98% 0.005 252);
  --accent-soft:  oklch(28% 0.06 252);   /* selected-row bg */
  --accent-ring:  oklch(68% 0.16 252 / 0.45);

  /* Semantic state */
  --state-on:     oklch(72% 0.16 155);   /* approved, IN, success */
  --state-on-soft:oklch(28% 0.05 155);
  --state-warn:   oklch(78% 0.14 75);    /* OUT, caution */
  --state-warn-soft:oklch(28% 0.05 75);
  --state-danger: oklch(70% 0.19 25);    /* revoke, delete, error */
  --state-danger-soft:oklch(28% 0.06 25);

  /* Spacing scale — 4-based */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Inter", sans-serif;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4);
}
.container.wide { max-width: 1400px; }

/* ============================================================
   Header
   ============================================================ */
header.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
header.top h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
header.top p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ============================================================
   Buttons — variant + size matrix
   ============================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border);
  --btn-bg-hover: var(--bg-elev-2);
  --btn-border-hover: var(--border-strong);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0 var(--s-4);
  height: 36px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-border: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-border-hover: var(--accent-hover);
}
.btn.secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border);
}
.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
  --btn-border: transparent;
  --btn-bg-hover: var(--bg-elev-2);
}
.btn.danger {
  --btn-bg: transparent;
  --btn-fg: var(--state-danger);
  --btn-border: var(--state-danger-soft);
  --btn-bg-hover: var(--state-danger-soft);
  --btn-border-hover: var(--state-danger);
}

.btn.sm { height: 28px; padding: 0 var(--s-3); font-size: var(--text-xs); }
.btn.lg { height: 44px; padding: 0 var(--s-5); font-size: var(--text-md); }

/* Legacy single-class fallback (old .btn calls without variant get secondary appearance) */
.btn:not(.primary):not(.secondary):not(.ghost):not(.danger) {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-border: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-border-hover: var(--accent-hover);
}

/* ============================================================
   Form controls — shared baseline
   ============================================================ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  font: inherit;
  font-size: var(--text-base);
  padding: 0 var(--s-3);
  height: 36px;
  width: 100%;
  background: var(--bg-elev-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
textarea { height: auto; padding: var(--s-2) var(--s-3); min-height: 60px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
select { appearance: none; padding-right: var(--s-6); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ============================================================
   Hub grid (homepage cards)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}
.card {
  display: block;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--bg-elev-2); }
.card h3 { margin: 0 0 var(--s-1); font-size: var(--text-md); font-weight: 600; }
.card p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ============================================================
   Login form
   ============================================================ */
.form { max-width: 380px; margin: var(--s-8) auto; padding: 0 var(--s-4); }
.form h2 { font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--s-4); }
.form input { margin: var(--s-2) 0; }
.form .err { color: var(--state-danger); font-size: var(--text-sm); margin-top: var(--s-3); }
.form .btn { width: 100%; margin-top: var(--s-3); }

/* ============================================================
   Utility classes
   ============================================================ */
.muted { color: var(--text-muted); }
.small { font-size: var(--text-xs); }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: var(--s-4) var(--s-3); }
  header.top { gap: var(--s-3); }
  header.top h1 { font-size: var(--text-lg); }
  header.top p { font-size: var(--text-xs); }
  header.top #auth-area { width: 100%; }
  header.top #auth-area .btn { flex: 1 1 auto; min-width: 0; padding: 0 var(--s-3); }
  /* Hide the "email · role" pill on tiny screens — buttons more important */
  header.top .hub-meta { display: none; }
  .grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .card { padding: var(--s-4); }
}