/* Direction: Tabitech brand — logo blue as the lead, deep navy bands, logo red as the accent mark, cool paper */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #e4ecf7;
  --border: #d2d7dd;
  --border-strong: #acb2b9;
  --ink: #0f1b3d;
  --muted: #626a7e;
  --accent: #1f6fbf;
  --accent-hover: #1a5ea2;
  --accent-ink: #ffffff;
  --accent-text: #1a559b;
  --accent-strong: #1d66b0;
  --accent-soft: #dbeafa;
  --accent-border: #94bae1;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d9e9e5;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ece3df;
  --warning-strong: #a64c08;
  --danger: #c4161c;
  --danger-ink: #ffffff;
  --danger-soft: #eedce1;
  --danger-strong: #c4161c;
  --chart-1: #1f6fbf;
  --chart-2: #a66bc7;
  --chart-3: #972840;
  --chart-4: #af7516;
  --chart-5: #386204;
  --chart-6: #0a9996;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-card: 16px;
  --radius-btn: 999px;
  --x-band: #0b1a4a;
  --x-on-photo: #ffffff;
  --x-cyan: #00aeef;
  --x-red: #d3141b;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030a11;
  --surface: #1c2329;
  --surface-2: #10161d;
  --border: #262c32;
  --border-strong: #4f5458;
  --ink: #f4f7fc;
  --muted: #94989e;
  --accent: #1f6fbf;
  --accent-hover: #4185c9;
  --accent-ink: #ffffff;
  --accent-text: #5090cd;
  --accent-strong: #5090cd;
  --accent-soft: #092037;
  --accent-border: #10375f;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #07241b;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a1a0f;
  --warning-strong: #c57a40;
  --danger: #c4161c;
  --danger-ink: #ffffff;
  --danger-soft: #2d0d13;
  --danger-strong: #d5585c;
  --chart-1: #1f6fbf;
  --chart-2: #a66bc7;
  --chart-3: #c75568;
  --chart-4: #af7516;
  --chart-5: #5d9229;
  --chart-6: #0a9996;
}

.hero-grid {
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
}
.date-block { box-shadow: 4px 4px 0 var(--x-red); }
.cert-frame {
  background: var(--surface);
  border: 10px double var(--accent);
  outline: 2px solid var(--x-red);
  outline-offset: 6px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cert-watermark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(70%, 520px);
  height: auto;
  z-index: -1;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Admin: brand bar, stats and event cards */
.admin-bar .btn-ghost { color: var(--x-on-photo); }
.admin-bar .btn-ghost:hover { background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); }
.admin-bar .btn-outline { background: transparent; color: var(--x-on-photo); border-color: color-mix(in srgb, var(--x-on-photo) 45%, transparent); }
.admin-bar .btn-outline:hover { background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); }
.admin-stripe { height: 4px; background: linear-gradient(90deg, var(--accent) 0 45%, var(--x-cyan) 45% 80%, var(--x-red) 80% 100%); }
.admin-stat { border-top: 4px solid var(--accent); }
.admin-stat:nth-child(2) { border-top-color: var(--x-cyan); }
.admin-stat:nth-child(4) { border-top-color: var(--x-red); }
.admin-event { border-left: 4px solid var(--border-strong); transition: box-shadow .15s ease; }
.admin-event:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--x-band) 14%, transparent); }
.admin-event-open { border-left-color: var(--accent); }
.admin-event-closed { border-left-color: var(--x-red); }
.admin-event-done { border-left-color: var(--success); }

@media print {
  .no-print { display: none !important; }
}