/**
 * UFOMYST design tokens — "Signal Night"
 * Brand: UFOMYST (ufomyst.com) — from Latin mysterium, "that which remains unexplained".
 * Palette: deep void + teal signal + violet anomaly.
 * Consume via CSS variables; Hono SSR shell maps these 1:1 (no client framework).
 *
 * Wordmark convention:
 *   UFO  → teal signal (weight 700, tight tracking)
 *   MYST → violet anomaly (weight 600, slightly open tracking)
 * Prefix --uf- kept short for class/token ergonomics; product name is UFOMYST.
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Brand                                                               */
  /* ------------------------------------------------------------------ */
  --uf-brand-name: "UFOMYST";
  --uf-brand-domain: "ufomyst.com";
  --uf-brand-tagline: "from the Latin mysterium — that which remains unexplained";
  --uf-brand-ufo: var(--uf-teal-400);
  --uf-brand-myst: var(--uf-violet-300);
  --uf-brand-wordmark-tracking: 0.08em;
  --uf-brand-wordmark-tracking-mono: 0.22em;

  /* ------------------------------------------------------------------ */
  /* Color — surfaces (dark-first)                                       */
  /* ------------------------------------------------------------------ */
  --uf-void-950: #05060a;
  --uf-void-900: #0a0c12;
  --uf-void-850: #0f1219;
  --uf-void-800: #151922;
  --uf-void-700: #1c2230;
  --uf-void-600: #2a3344;

  --uf-surface-0: var(--uf-void-950);
  --uf-surface-1: var(--uf-void-900);
  --uf-surface-2: var(--uf-void-850);
  --uf-surface-3: var(--uf-void-800);
  --uf-surface-elevated: color-mix(in srgb, var(--uf-void-800) 88%, var(--uf-teal-500) 12%);

  /* ------------------------------------------------------------------ */
  /* Color — teal signal (primary)                                       */
  /* ------------------------------------------------------------------ */
  --uf-teal-50:  #e6fffb;
  --uf-teal-100: #b3fff3;
  --uf-teal-200: #7aefe0;
  --uf-teal-300: #3dd9c8;
  --uf-teal-400: #14c4b5;
  --uf-teal-500: #0aa896;   /* brand primary */
  --uf-teal-600: #088f80;
  --uf-teal-700: #067266;
  --uf-teal-800: #055a51;
  --uf-teal-900: #033d37;

  /* ------------------------------------------------------------------ */
  /* Color — violet anomaly (accent / links / dossiers)                  */
  /* ------------------------------------------------------------------ */
  --uf-violet-50:  #f3eeff;
  --uf-violet-100: #e0d4ff;
  --uf-violet-200: #c4a8ff;
  --uf-violet-300: #a67cff;
  --uf-violet-400: #8b5cf6;
  --uf-violet-500: #7c3aed;  /* brand accent */
  --uf-violet-600: #6d28d9;
  --uf-violet-700: #5b21b6;
  --uf-violet-800: #4c1d95;
  --uf-violet-900: #3b0764;

  /* ------------------------------------------------------------------ */
  /* Color — semantic                                                    */
  /* ------------------------------------------------------------------ */
  --uf-ink:        #e8ecf4;
  --uf-ink-muted:  #9aa3b5;
  --uf-ink-faint:  #6b7385;
  --uf-ink-invert: #0a0c12;

  --uf-border:        color-mix(in srgb, var(--uf-ink) 10%, transparent);
  --uf-border-strong: color-mix(in srgb, var(--uf-ink) 18%, transparent);
  --uf-border-signal: color-mix(in srgb, var(--uf-teal-400) 45%, transparent);
  --uf-border-anomaly: color-mix(in srgb, var(--uf-violet-400) 45%, transparent);

  --uf-success: #22c55e;
  --uf-warning: #f59e0b;
  --uf-danger:  #ef4444;
  --uf-info:    var(--uf-teal-400);

  /* Glow / signal effects */
  --uf-glow-teal:   0 0 24px color-mix(in srgb, var(--uf-teal-400) 35%, transparent);
  --uf-glow-violet: 0 0 28px color-mix(in srgb, var(--uf-violet-400) 40%, transparent);
  --uf-glow-soft:   0 8px 32px color-mix(in srgb, #000 55%, transparent);

  /* Gradients */
  --uf-grad-signal: linear-gradient(135deg, var(--uf-teal-500) 0%, var(--uf-violet-500) 100%);
  --uf-grad-hero: linear-gradient(
    160deg,
    color-mix(in srgb, var(--uf-void-900) 70%, var(--uf-violet-900) 30%) 0%,
    var(--uf-void-950) 55%,
    color-mix(in srgb, var(--uf-void-900) 80%, var(--uf-teal-900) 20%) 100%
  );
  --uf-grad-card: linear-gradient(
    180deg,
    color-mix(in srgb, var(--uf-void-800) 92%, var(--uf-teal-700) 8%) 0%,
    var(--uf-void-850) 100%
  );
  --uf-grad-rail: linear-gradient(
    90deg,
    transparent 0%,
    var(--uf-teal-500) 20%,
    var(--uf-violet-400) 80%,
    transparent 100%
  );

  /* ------------------------------------------------------------------ */
  /* Typography                                                          */
  /* ------------------------------------------------------------------ */
  --uf-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --uf-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --uf-font-mono: "IBM Plex Mono", "Cascadia Code", ui-monospace, monospace;

  --uf-fs-2xs: 0.6875rem;  /* 11 */
  --uf-fs-xs:  0.75rem;    /* 12 */
  --uf-fs-sm:  0.875rem;   /* 14 */
  --uf-fs-md:  1rem;       /* 16 */
  --uf-fs-lg:  1.125rem;   /* 18 */
  --uf-fs-xl:  1.375rem;   /* 22 */
  --uf-fs-2xl: 1.75rem;    /* 28 */
  --uf-fs-3xl: 2.25rem;    /* 36 */
  --uf-fs-4xl: 3rem;       /* 48 */

  --uf-lh-tight: 1.2;
  --uf-lh-snug:  1.35;
  --uf-lh-body:  1.55;
  --uf-lh-loose: 1.7;

  --uf-fw-regular: 400;
  --uf-fw-medium:  500;
  --uf-fw-semibold: 600;
  --uf-fw-bold:    700;

  --uf-tracking-tight: -0.02em;
  --uf-tracking-wide:  0.06em;
  --uf-tracking-signal: 0.14em;

  /* ------------------------------------------------------------------ */
  /* Space / radius / motion                                             */
  /* ------------------------------------------------------------------ */
  --uf-space-1: 0.25rem;
  --uf-space-2: 0.5rem;
  --uf-space-3: 0.75rem;
  --uf-space-4: 1rem;
  --uf-space-5: 1.5rem;
  --uf-space-6: 2rem;
  --uf-space-7: 3rem;
  --uf-space-8: 4rem;

  --uf-radius-sm: 6px;
  --uf-radius-md: 10px;
  --uf-radius-lg: 16px;
  --uf-radius-xl: 24px;
  --uf-radius-pill: 999px;

  --uf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --uf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --uf-dur-fast: 120ms;
  --uf-dur-med:  220ms;
  --uf-dur-slow: 400ms;

  /* Layout */
  --uf-container: 1120px;
  --uf-gutter: var(--uf-space-5);

  /* Shape-chip tints (bestiary / filters) */
  --uf-shape-light:    var(--uf-teal-300);
  --uf-shape-triangle: var(--uf-violet-300);
  --uf-shape-disk:     #7dd3fc;
  --uf-shape-fireball: #fb923c;
  --uf-shape-sphere:   #a5b4fc;
  --uf-shape-other:    var(--uf-ink-muted);
}

/* Optional light theme hook (not default) */
[data-theme="light"] {
  --uf-surface-0: #f4f7fb;
  --uf-surface-1: #ffffff;
  --uf-surface-2: #eef2f8;
  --uf-surface-3: #e2e8f0;
  --uf-ink: #0f172a;
  --uf-ink-muted: #475569;
  --uf-ink-faint: #94a3b8;
  --uf-border: color-mix(in srgb, #0f172a 10%, transparent);
}

/* ------------------------------------------------------------------ */
/* Base reset for previews / future global shell                         */
/* ------------------------------------------------------------------ */
.uf-root {
  color: var(--uf-ink);
  background: var(--uf-surface-0);
  font-family: var(--uf-font-sans);
  font-size: var(--uf-fs-md);
  line-height: var(--uf-lh-body);
  -webkit-font-smoothing: antialiased;
}

.uf-root *,
.uf-root *::before,
.uf-root *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Wordmark — UFOMYST (Aperture mark + dual-tone text)                    */
/* Mark: teal iris + violet tilted ring. Text: UFO (teal) + MYST (violet) */
/* Alt: mono spaced signal strip for nav/footer chrome.                   */
/* ------------------------------------------------------------------ */
.uf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--uf-font-display);
  font-size: var(--uf-fs-xl);
  font-weight: var(--uf-fw-bold);
  letter-spacing: var(--uf-brand-wordmark-tracking);
  line-height: 1;
  text-decoration: none;
  color: inherit;
  user-select: none;
}

.uf-wordmark__mark {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  display: block;
}

.uf-wordmark__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.uf-wordmark__ufo {
  color: var(--uf-brand-ufo);
  font-weight: var(--uf-fw-bold);
  letter-spacing: var(--uf-tracking-tight);
}

.uf-wordmark__myst {
  color: var(--uf-brand-myst);
  font-weight: var(--uf-fw-semibold);
  letter-spacing: 0.04em;
}

.uf-wordmark--lg {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.1em;
  gap: 0.38em;
}

.uf-wordmark--lg .uf-wordmark__mark {
  width: 0.95em;
  height: 0.95em;
}

.uf-wordmark--lg .uf-wordmark__ufo {
  letter-spacing: -0.03em;
}

.uf-wordmark--lg .uf-wordmark__myst {
  letter-spacing: 0.06em;
}

.uf-wordmark--sm {
  font-size: var(--uf-fs-md);
  letter-spacing: 0.06em;
  gap: 0.4em;
}

.uf-wordmark--sm .uf-wordmark__mark {
  width: 1.15em;
  height: 1.15em;
}

/* Mono / signal strip — nav rails, footers, status chrome */
.uf-wordmark--mono {
  font-family: var(--uf-font-mono);
  font-weight: var(--uf-fw-medium);
  font-size: var(--uf-fs-sm);
  letter-spacing: var(--uf-brand-wordmark-tracking-mono);
  text-transform: uppercase;
  gap: 0.45em;
}

.uf-wordmark--mono .uf-wordmark__mark {
  width: 1.2em;
  height: 1.2em;
}

.uf-wordmark--mono .uf-wordmark__ufo,
.uf-wordmark--mono .uf-wordmark__myst {
  letter-spacing: inherit;
  font-weight: inherit;
}

.uf-wordmark--solid {
  background: var(--uf-grad-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.uf-wordmark--solid .uf-wordmark__ufo,
.uf-wordmark--solid .uf-wordmark__myst {
  color: inherit;
}

/* Mark stays painted in solid mode (text-clip only hits text) */
.uf-wordmark--solid .uf-wordmark__mark {
  -webkit-background-clip: initial;
  background-clip: initial;
  color: initial;
}

.uf-tagline {
  margin: 0;
  font-family: var(--uf-font-mono);
  font-size: var(--uf-fs-2xs);
  letter-spacing: var(--uf-tracking-wide);
  color: var(--uf-ink-faint);
  max-width: 48ch;
  line-height: var(--uf-lh-snug);
}

.uf-tagline em {
  font-style: normal;
  color: var(--uf-ink-muted);
}