/* ===========================================================================
   Overeye — Shared design system
   ---------------------------------------------------------------------------
   One stylesheet loaded by every page: design tokens, the Overeye eye motif,
   and the small set of primitives (skip link, focus ring, buttons, cards,
   badges) that used to be re-declared page by page.

   Nothing here overrides existing page CSS by force: selectors are namespaced
   under `.oe-*` so a page can adopt them piece by piece.
   ======================================================================== */

/* The `hidden` attribute must win over any component display rule; several
   Overeye views set display:flex/grid on the same element. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* Brand — Overeye is monochrome. The eye is the only "colour". */
  --oe-ink: #0b0b0c;
  --oe-ink-soft: #3f3f46;
  --oe-muted: #6b7280;
  --oe-paper: #ffffff;
  --oe-surface: #fafafa;
  --oe-surface-2: #f2f3f5;
  --oe-line: rgba(11, 11, 12, 0.10);
  --oe-line-strong: rgba(11, 11, 12, 0.22);

  /* Semantic */
  --oe-success: #0f7a4a;
  --oe-warning: #8a5a00;
  --oe-danger: #b3261e;
  --oe-info: #1f4fd8;
  --oe-on-accent: #ffffff;

  /* The iris tint — the single accent, used sparingly. */
  --oe-iris: #1c6cf5;
  --oe-iris-soft: rgba(28, 108, 245, 0.14);

  /* Typography */
  --oe-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --oe-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --oe-text-xs: 0.75rem;
  --oe-text-sm: 0.875rem;
  --oe-text-base: 1rem;
  --oe-text-lg: 1.125rem;
  --oe-text-xl: 1.375rem;
  --oe-text-2xl: 1.75rem;
  --oe-text-3xl: 2.25rem;
  --oe-leading: 1.6;

  /* Spacing — 4px rhythm, dashboard-leaning density */
  --oe-space-1: 4px;
  --oe-space-2: 8px;
  --oe-space-3: 12px;
  --oe-space-4: 16px;
  --oe-space-5: 24px;
  --oe-space-6: 32px;
  --oe-space-7: 48px;
  --oe-space-8: 64px;

  /* Shape */
  --oe-radius-sm: 8px;
  --oe-radius: 14px;
  --oe-radius-lg: 22px;
  --oe-radius-pill: 999px;

  /* Elevation */
  --oe-shadow-1: 0 1px 2px rgba(11, 11, 12, 0.06);
  --oe-shadow-2: 0 6px 20px rgba(11, 11, 12, 0.08);
  --oe-shadow-3: 0 18px 48px rgba(11, 11, 12, 0.12);

  /* Motion — distance-scaled, not one duration for everything */
  --oe-dur-instant: 90ms;
  --oe-dur-fast: 160ms;
  --oe-dur-base: 240ms;
  --oe-dur-slow: 420ms;
  --oe-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --oe-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layering */
  --oe-z-base: 1;
  --oe-z-sticky: 100;
  --oe-z-header: 200;
  --oe-z-overlay: 400;
  --oe-z-modal: 500;
  --oe-z-toast: 600;
  --oe-z-skip: 700;
}

:root[data-oe-theme="dark"],
.oe-dark {
  --oe-ink: #f5f5f6;
  --oe-ink-soft: #c8c8cd;
  --oe-muted: #9a9aa3;
  --oe-paper: #0d0d0f;
  --oe-surface: #141417;
  --oe-surface-2: #1c1c21;
  --oe-line: rgba(245, 245, 246, 0.12);
  --oe-line-strong: rgba(245, 245, 246, 0.26);
  --oe-success: #4ade80;
  --oe-warning: #fbbf24;
  --oe-danger: #f87171;
  --oe-info: #7aa2ff;
  --oe-iris: #6ea8ff;
  --oe-iris-soft: rgba(110, 168, 255, 0.18);
  --oe-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --oe-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
  --oe-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   THE EYE
   -------------------------------------------------------------------------
   `.oe-eye` is the Overeye brand mark: a sclera, a pupil that looks around,
   an iris ring, and an eyelid that blinks. It is pure CSS, scales with
   `--oe-eye-size`, and inherits colour so it works on any surface.

   Variants:
     .oe-eye--inline   sized to the x-height of the surrounding text (the "O")
     .oe-eye--ring     adds the iris ring + soft halo
     .oe-eye--awake    faster, wider pupil travel (hero / loader)
     .oe-eye--watch    pupil follows the pointer (needs assets/js/overeye.js)
     .oe-eye--invert   dark sclera on light backgrounds
   ====================================================================== */

.oe-eye {
  /* The eye keeps its own palette: a real eye is light with a dark pupil in
     every theme, so it must not follow --oe-ink when dark mode flips. */
  --oe-eye-size: 1em;
  --oe-eye-sclera: #ffffff;
  --oe-eye-pupil: #0b0b0c;
  --oe-eye-lid: #0b0b0c;
  --oe-eye-travel: 22%;
  --oe-eye-look-x: 0;
  --oe-eye-look-y: 0;

  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--oe-eye-size);
  height: var(--oe-eye-size);
  border-radius: 50%;
  background: var(--oe-eye-sclera);
  overflow: hidden;
  vertical-align: baseline;
}

/* Pupil — dead centre, travelling left and right. */
.oe-eye::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: var(--oe-eye-pupil);
  z-index: 0;
  /* Horizontal only: the pupil scans side to side and never drifts up or down. */
  transform: translateX(calc(var(--oe-eye-look-x) * var(--oe-eye-travel)));
  transition: transform var(--oe-dur-base) var(--oe-ease-out);
  will-change: transform;
}

/* Upper lid — rests at the halfway line and drops from there when it blinks. */
.oe-eye::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: var(--oe-eye-lid);
  border-bottom-left-radius: 999px 80%;
  border-bottom-right-radius: 999px 80%;
  z-index: 1;
  pointer-events: none;
  transform-origin: top center;
}

/* Idle: the pupil scans left and right, like something is being watched. */
.oe-eye:not(.oe-eye--watch)::before {
  animation: oe-eye-scan 7s var(--oe-ease) infinite;
}

.oe-eye--awake:not(.oe-eye--watch)::before {
  --oe-eye-travel: 30%;
  animation-duration: 4.2s;
}

/* Blink: the lid drops over the whole eye at irregular-feeling intervals. */
.oe-eye--awake::after,
.oe-eye--ring::after {
  animation: oe-eye-blink 6.4s var(--oe-ease) infinite;
}

@keyframes oe-eye-scan {
  0%, 12%   { transform: translateX(calc(var(--oe-eye-travel) * -1)); }
  38%, 52%  { transform: translateX(var(--oe-eye-travel)); }
  74%, 100% { transform: translateX(calc(var(--oe-eye-travel) * -1)); }
}

@keyframes oe-eye-blink {
  0%, 90%, 100% { height: 50%; }
  93%           { height: 100%; }
  95%           { height: 50%; }
  96.5%         { height: 84%; }
  98%           { height: 50%; }
}

/* Iris ring + halo — used when the eye is a standalone mark, not a letter. */
.oe-eye--ring {
  box-shadow:
    0 0 0 max(1px, calc(var(--oe-eye-size) * 0.06)) var(--oe-eye-lid),
    0 0 0 max(2px, calc(var(--oe-eye-size) * 0.10)) var(--oe-iris-soft);
}

.oe-eye--invert {
  --oe-eye-sclera: #0b0b0c;
  --oe-eye-pupil: #ffffff;
  --oe-eye-lid: #ffffff;
}

/* Pointer-tracking eye: JS writes --oe-eye-look-x / -y, CSS does the rest. */
.oe-eye--watch::before {
  animation: none;
}

/* Size helpers */
.oe-eye--inline { --oe-eye-size: calc(1ex + 0.08ex); }
.oe-eye--sm     { --oe-eye-size: 15px; }
.oe-eye--md     { --oe-eye-size: 24px; }
.oe-eye--lg     { --oe-eye-size: 40px; }
.oe-eye--xl     { --oe-eye-size: 80px; }
.oe-eye--hero   { --oe-eye-size: clamp(100px, 18vw, 210px); }

/* Wordmark: "[eye]vereye" — the eye literally is the leading O. */
.oe-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22ch;
  font-family: var(--oe-font);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.oe-wordmark .oe-eye {
  --oe-eye-size: calc(1ex + 0.08ex);
}

/* Lead wordmark (site header, splash, footer): the eye is oversized on
   purpose so the mark reads as an eye first and a word second. */
.oe-wordmark--lead {
  align-items: center;
  gap: 0.16ch;
}

.oe-wordmark--lead .oe-eye {
  --oe-eye-size: 0.80em;
  --oe-eye-travel: 26%;
  box-shadow: 0 0 0 max(1px, 0.035em) currentColor;
}

.oe-wordmark--lead:hover .oe-eye,
.oe-wordmark--lead:focus-visible .oe-eye {
  --oe-eye-travel: 36%;
}

.oe-wordmark:hover .oe-eye,
.oe-wordmark:focus-visible .oe-eye {
  --oe-eye-travel: 34%;
}

/* Oversized decorative eye that watches the visitor from behind the hero. */
.oe-hero-eye {
  position: absolute;
  inset: auto auto 8% 6%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
}

.oe-hero-eye .oe-eye {
  --oe-eye-size: clamp(180px, 26vw, 420px);
  --oe-eye-travel: 30%;
}

@media (max-width: 860px) {
  .oe-hero-eye { display: none; }
}

/* Eye used as a section marker / divider. */
.oe-eye-rule {
  display: flex;
  align-items: center;
  gap: var(--oe-space-4);
  margin: var(--oe-space-7) 0;
  color: var(--oe-line-strong);
}

.oe-eye-rule::before,
.oe-eye-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

/* A pupil-sized dot used as a bullet in lists. */
.oe-eye-bullet {
  --oe-eye-size: 12px;
  vertical-align: -1px;
  margin-right: var(--oe-space-2);
}

/* Loader: a big eye that opens, looks around, then hands over to the page. */
.oe-eye-loader {
  position: fixed;
  inset: 0;
  z-index: var(--oe-z-overlay);
  display: grid;
  place-items: center;
  gap: var(--oe-space-5);
  background: var(--oe-paper);
  transition: opacity var(--oe-dur-slow) var(--oe-ease), visibility var(--oe-dur-slow);
}

.oe-eye-loader[hidden],
.oe-eye-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.oe-eye-loader .oe-eye {
  animation: oe-eye-open var(--oe-dur-slow) var(--oe-ease-out) both;
}

@keyframes oe-eye-open {
  from { transform: scaleY(0.05); opacity: 0; }
  to   { transform: scaleY(1);    opacity: 1; }
}

/* -------------------------------------------------------------- splash mark
   Every Overeye surface shows the same eye while it loads, so the mark reads
   as the signature of the whole product and not of one page. */

.oe-splash-mark {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.4ch;
  font-family: var(--oe-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}

.oe-splash-mark .oe-eye {
  --oe-eye-size: 0.86em;
  --oe-eye-travel: 30%;
  box-shadow: 0 0 0 max(1px, 0.03em) currentColor;
}

.oe-splash-mark small {
  flex: 0 0 100%;
  text-align: center;
  margin-top: 0.45em;
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ------------------------------------------------------------- primitives */

.oe-skip-link {
  position: absolute;
  left: var(--oe-space-4);
  top: var(--oe-space-4);
  z-index: var(--oe-z-skip);
  padding: var(--oe-space-3) var(--oe-space-4);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-ink);
  color: var(--oe-paper);
  font: 600 var(--oe-text-sm) / 1 var(--oe-font);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--oe-dur-fast) var(--oe-ease);
}

.oe-skip-link:focus-visible {
  transform: translateY(0);
}

/* One visible focus treatment for the whole product. 2px perimeter, offset,
   drawn in currentColor so it survives on every surface. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--oe-radius-sm);
}

.oe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oe-space-2);
  min-height: 44px;
  padding: 0 var(--oe-space-5);
  border: 1px solid transparent;
  border-radius: var(--oe-radius-pill);
  background: var(--oe-ink);
  color: var(--oe-paper);
  font: 600 var(--oe-text-sm) / 1 var(--oe-font);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--oe-dur-instant) var(--oe-ease),
    background-color var(--oe-dur-fast) var(--oe-ease),
    box-shadow var(--oe-dur-fast) var(--oe-ease);
}

.oe-btn:hover { box-shadow: var(--oe-shadow-2); }
.oe-btn:active { transform: scale(0.98); }

.oe-btn[disabled],
.oe-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.oe-btn--ghost {
  background: transparent;
  color: var(--oe-ink);
  border-color: var(--oe-line-strong);
}

.oe-btn--danger { background: var(--oe-danger); color: #fff; }

.oe-card {
  background: var(--oe-paper);
  border: 1px solid var(--oe-line);
  border-radius: var(--oe-radius);
  box-shadow: var(--oe-shadow-1);
  padding: var(--oe-space-5);
}

.oe-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--oe-space-1);
  padding: 2px var(--oe-space-3);
  border-radius: var(--oe-radius-pill);
  border: 1px solid var(--oe-line);
  background: var(--oe-surface);
  color: var(--oe-ink-soft);
  font: 600 var(--oe-text-xs) / 1.6 var(--oe-font);
  white-space: nowrap;
}

.oe-badge--ok   { color: var(--oe-success); border-color: currentColor; }
.oe-badge--warn { color: var(--oe-warning); border-color: currentColor; }
.oe-badge--err  { color: var(--oe-danger);  border-color: currentColor; }

/* Numeric columns should not jitter as digits change. */
.oe-tabular { font-variant-numeric: tabular-nums; }

/* Long tokens (hashes, IDs, URLs) reflow instead of blowing out the layout. */
.oe-wrap-anywhere {
  overflow-wrap: anywhere;
  min-width: 0;
}

.oe-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Theme toggle button — the icon is, of course, an eye. */
.oe-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--oe-line);
  border-radius: var(--oe-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------ motion opt-out */

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

  .oe-eye::before,
  .oe-eye::after {
    animation: none !important;
    transform: none;
  }
}