/* First Light Portal shell — Apple-dark OS-Design language (Phase 3 pass).
   Applies to the portal's own chrome ONLY (landing, gate, viewer, shared,
   review, admin). Client deliverables and decks keep the First Light presentation
   identity (PRESENTATION_SPEC.md) and never load this file.
   Token source of truth: ~/OS Design/Apple Dark DESIGN.md + the ops --ck-*
   set in Ops-Brain/web/app/globals.css. */

:root {
  --ck-canvas: #0f1a28;
  --ck-deep: #182838;
  --ck-graphite: #243447;
  --ck-elevated: #324355;
  --ck-smoke: #40556a;
  --ck-pearl: #fbf6ec;
  --ck-fog: #b1c4cc;
  --ck-fog-2: #c2dede;      /* muted on graphite: holds 4.5:1 */
  --ck-platinum: #d7e9e9;
  --ck-slate: #98afbc;      /* never for small text */
  --ck-magenta: #f8b818;
  --ck-magenta-bright: #ffd466;
  --ck-magenta-dim: #e86808;
  --ck-lime: #98c8c8;
  --ck-amber: #f59e0b;
  --ck-blue: #2997ff;
  --ck-red: #ef4444;
  --ck-rose: #e0607e;
  --ck-magenta-glow: rgba(248,184,24, 0.14);
  --ck-hair: rgba(255, 255, 255, 0.07);
  --ck-hair-2: rgba(255, 255, 255, 0.12);
  --ck-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ck-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.ck-shell {
  background: var(--ck-canvas);
  color: var(--ck-pearl);
  font-family: var(--ck-font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* The one lit object: a soft magenta bloom behind the focal element. */
.ck-bloom {
  position: fixed;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  height: 70vh;
  background: radial-gradient(ellipse, rgba(248,184,24, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Surfaces */
.ck-card {
  position: relative;
  z-index: 2;
  background: var(--ck-graphite);
  border: 1px solid var(--ck-hair);
  border-radius: 28px;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.ck-tile {
  background: var(--ck-deep);
  border: 1px solid var(--ck-hair);
  border-radius: 10px;
}

/* Type */
.ck-eyebrow {
  font-family: var(--ck-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ck-fog);
}

.ck-h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ck-pearl);
}

.ck-sub {
  font-size: 14px;
  color: var(--ck-fog);
}

/* Muted text sitting ON a graphite card needs the brighter step to hold
   4.5:1 (#b1c4cc passes on black, not on #243447). */
.ck-card .ck-eyebrow,
.ck-card .ck-sub {
  color: var(--ck-fog-2);
}

/* Controls */
.ck-input {
  width: 100%;
  padding: 0.8rem 1.1rem;
  background: var(--ck-deep);
  border: 1px solid var(--ck-hair-2);
  border-radius: 999px;
  color: var(--ck-pearl);
  font-family: var(--ck-font);
  font-size: 15px;
  letter-spacing: 0;
  outline: none;
  transition: border-color 0.15s;
}
.ck-input::placeholder { color: var(--ck-fog); }
.ck-input:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 1px var(--ck-blue);
}

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  background: var(--ck-magenta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--ck-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.15s;
  box-shadow: 0 0 22px var(--ck-magenta-glow);
}
.ck-btn:hover { opacity: 0.92; }
.ck-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ck-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ck-canvas), 0 0 0 4px var(--ck-blue);
}

.ck-btn-ghost {
  background: var(--ck-graphite);
  color: var(--ck-pearl);
  border: 1px solid var(--ck-hair-2);
  box-shadow: none;
}
.ck-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.2); opacity: 1; }

a.ck-link {
  color: var(--ck-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.ck-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ck-blue);
  border-radius: 10px;
}

/* Error surface (matches the ops rose spec; always pair with role="alert") */
.ck-error {
  color: var(--ck-rose);
  font-size: 13px;
}
.ck-error-card {
  border: 1px solid rgba(224, 96, 126, 0.4);
  background: rgba(224, 96, 126, 0.06);
  color: var(--ck-rose);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 13px;
}

/* Generic focus ring for any interactive element that has no custom one. */
.ck-shell button:focus-visible,
.ck-shell [tabindex]:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 2px;
}