/* orchestratedbyczr UI Library : design tokens and starter components.
   Pairs with orchestratedbyczr-ui-library.md.

   Governing principle: inspiration, not imitation. The five pillars are felt,
   never copied. Pull the principle, leave the motif. Default to subtraction:
   one quiet move per surface, a scarce cyan accent, lots of space. If a viewer
   can name the reference, it is too loud.

   House line: a quiet, confident dark editorial surface anchored by a Didone
   wordmark, generous space, and a single scarce accent.

   Load fonts (Google Fonts): Bodoni Moda, Inter, Space Mono. Always ship the
   full fallback stack. No em dashes anywhere, including in copy you generate. */

:root {
  /* Color : black-to-navy void with depth */
  --czr-void: #06080d;          /* deepest background */
  --czr-bg: #0a0e16;            /* base surface */
  --czr-bg-elevated: #111726;   /* panels, cards */
  --czr-line: #1d2536;          /* hairlines, borders */
  --czr-ink: #f4f6fb;           /* primary text */
  --czr-muted: #8a93a6;         /* secondary text */
  --czr-faint: #4a5266;         /* tertiary, disabled */

  /* Accent : cyan is the only "live" signal. Keep it scarce. One focal use per view. */
  --czr-cyan: #4dd6ff;
  --czr-cyan-soft: #2a7fa3;
  --czr-glow: 0 0 18px rgba(77, 214, 255, 0.30);
  /* Optional EVC warmth (placeholder, confirm real brand color) */
  --czr-warm: #e8a35c;

  /* Quiet depth, not a particle field. A soft gradient you almost do not notice. */
  --czr-field: radial-gradient(120% 100% at 50% 0%, #121c2f 0%, #0a0e16 55%, #06080d 100%);

  /* Iridescent "data-as-pigment" palette (Refik-esque, our own values).
     Used by the generative flow field and atmosphere as a thin-film shift:
     deep ocean into teal into violet into magenta into warm ember. The
     artwork carries the chroma; the chrome (above) stays near-monochrome. */
  --czr-iris-ocean: #0b2a4a;
  --czr-iris-teal:  #1fa8a0;
  --czr-iris-violet:#7b5cff;
  --czr-iris-magenta:#ff4fa3;
  --czr-iris-ember: #ff7a2f;

  /* Type */
  --czr-font-display: "Bodoni Moda", Didot, "DM Serif Display", Georgia, serif;
  --czr-font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --czr-font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (display-heavy, big jumps) */
  --czr-step-hero: clamp(3.5rem, 12vw, 11rem);
  --czr-step-h1: clamp(2.5rem, 6vw, 5rem);
  --czr-step-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --czr-step-body: 1.0625rem;
  --czr-step-label: 0.75rem;

  /* Spacing (baseline rhythm) */
  --czr-space-1: 0.5rem;
  --czr-space-2: 1rem;
  --czr-space-3: 1.5rem;
  --czr-space-4: 2.5rem;
  --czr-space-5: 4rem;
  --czr-space-6: 6.5rem;

  /* Radius : mostly sharp; radius is the exception */
  --czr-radius-0: 0;
  --czr-radius-sm: 3px;

  /* Motion : slow, alive, eased. Like breathing, never theatrical. */
  --czr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --czr-dur-fast: 220ms;
  --czr-dur: 520ms;
  --czr-dur-slow: 900ms;
}

/* ----- Base ----- */
.czr-root {
  background: var(--czr-field);
  color: var(--czr-ink);
  font-family: var(--czr-font-sans);
  font-size: var(--czr-step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ----- Display wordmark (Monet-poster Didone) ----- */
.czr-display {
  font-family: var(--czr-font-display);
  font-size: var(--czr-step-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
}
.czr-display--caps { text-transform: uppercase; letter-spacing: 0.02em; }

.czr-h1 { font-family: var(--czr-font-display); font-size: var(--czr-step-h1); font-weight: 700; line-height: 1.02; }
.czr-h2 { font-family: var(--czr-font-display); font-size: var(--czr-step-h2); font-weight: 500; line-height: 1.1; }

/* ----- Label / kicker (the discipline from Off-White, not the motif) ----- */
/* Tight caps with wide tracking. Use once or twice per page, not as a theme. */
.czr-label {
  font-family: var(--czr-font-sans);
  font-size: var(--czr-step-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--czr-muted);
}

/* Small mono caption for meta or data. Quiet, occasional. */
.czr-meta {
  font-family: var(--czr-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--czr-faint);
}

/* ----- Operator-console panel (calm structure, not a data wall) ----- */
.czr-panel {
  background: var(--czr-bg-elevated);
  border: 1px solid var(--czr-line);
  border-radius: var(--czr-radius-0);
  padding: var(--czr-space-3);
}
.czr-figure { font-family: var(--czr-font-mono); font-variant-numeric: tabular-nums; }
.czr-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--czr-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--czr-cyan);
}
.czr-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--czr-cyan);
  box-shadow: var(--czr-glow);
}

/* ----- Button ----- */
.czr-btn {
  font-family: var(--czr-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--czr-ink);
  background: transparent;
  border: 1px solid var(--czr-line);
  padding: 0.85rem 1.6rem;
  border-radius: var(--czr-radius-0);
  cursor: pointer;
  transition: border-color var(--czr-dur-fast) var(--czr-ease),
              color var(--czr-dur-fast) var(--czr-ease);
}
.czr-btn:hover { border-color: var(--czr-cyan-soft); color: var(--czr-cyan); }

/* ----- Glass panel (frosted, Perplexity-style) -----
   A frosted panel that floats over a rich background (the generative stage,
   imagery, the atmosphere). Radius is a deliberate exception here. The blur
   reads the saturated surface behind it; the @supports fallback keeps it
   legible where backdrop-filter is unavailable. */
.czr-glass {
  position: relative;
  background: rgba(17, 23, 38, 0.42);
  border: 1px solid rgba(244, 246, 251, 0.14);
  border-radius: 16px;
  padding: var(--czr-space-3);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
/* Opaque fallback where blur is not supported, so text stays legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .czr-glass { background: rgba(13, 18, 30, 0.94); }
}

/* ----- Generative stage -----
   A bordered surface that holds a full-bleed generative canvas (the flow
   field) with content layered over it. The "saturated core" inside the
   neutral shell. */
.czr-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--czr-line);
  border-radius: var(--czr-radius-0);
  background: var(--czr-void);
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: var(--czr-space-4);
}
.czr-stage > .czr-flowfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.czr-stage > :not(.czr-flowfield) { position: relative; z-index: 1; }

/* ----- Reveal on scroll -----
   Visible by default. The hidden start state only applies once JS has added
   .czr-js to the root, so a missing/failed observer never leaves content
   stuck invisible. JS adds .is-in (via IntersectionObserver, with a load-event
   fallback for browsers where the observer never fires). */
.czr-js .czr-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--czr-dur) var(--czr-ease), transform var(--czr-dur) var(--czr-ease); }
.czr-js .czr-reveal.is-in { opacity: 1; transform: none; }

/* ----- Respect reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .czr-reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}