/* ============================================================
   TITTANIUM / RAFAEL SILVA — DESIGN TOKENS
   Premium · technical · editorial · motion-first
   ============================================================ */

:root {
  /* — INK (dark base, layered — slight blue undertone) ——————————— */
  --ink-000: #05070d;          /* page void */
  --ink-050: #080b14;          /* primary surface */
  --ink-100: #0b1020;          /* raised / hero base */
  --ink-200: #10172a;          /* card */
  --ink-300: #161e34;          /* card hover */
  --ink-400: #1f2a44;          /* border strong */
  --ink-500: #2a3656;          /* mid */

  /* — TEXT ———————————————————————————————————————— */
  --fg-100: #f5f5f4;           /* primary */
  --fg-200: #d6d4cf;           /* secondary */
  --fg-300: #9a9893;           /* tertiary */
  --fg-400: #6b6964;           /* muted */
  --fg-500: #4a4844;           /* disabled / faint */

  /* — RULES ———————————————————————————————————————— */
  --rule-100: rgba(255, 255, 255, 0.04);
  --rule-200: rgba(255, 255, 255, 0.07);
  --rule-300: rgba(255, 255, 255, 0.12);
  --rule-400: rgba(255, 255, 255, 0.18);

  /* — COMMERCE LIME (Shopify / primary action) ——————————————— */
  --ember-300: #d8ff7a;
  --ember-400: #a3ff12;
  --ember-500: #95f20f;        /* PRIMARY ACCENT */
  --ember-600: #6fc600;
  --ember-700: #3f8200;
  --ember-glow: rgba(149, 242, 15, 0.32);
  --ember-wash: rgba(149, 242, 15, 0.08);

  /* — CYAN / ELECTRIC BLUE (data / AI) ———————————————————— */
  --cyan-300: #a5e8ff;
  --cyan-400: #5ec8ff;
  --cyan-500: #2ea7e8;
  --cyan-600: #1c7fab;
  --cyan-glow: rgba(94, 200, 255, 0.30);
  --cyan-wash: rgba(94, 200, 255, 0.06);

  /* — VIOLET (creative performance, sparingly) ——————————————— */
  --violet-300: #b7a6ff;
  --violet-400: #8b5cf6;
  --violet-500: #7c5cff;
  --violet-glow: rgba(124, 92, 255, 0.30);
  --violet-wash: rgba(124, 92, 255, 0.07);

  /* — STATUS ——————————————————————————————————————— */
  --status-live: #4ade80;
  --status-warn: #facc15;
  --status-err:  #ef4444;
  --status-idle: #6b6964;

  /* — TYPE ———————————————————————————————————————— */
  --font-serif: "Plus Jakarta Sans", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:  "Manrope", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "Berkeley Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-signature: "Allura", "Segoe Script", "Brush Script MT", cursive;

  /* Display scale (1920 reference; clamp() responds to viewport) */
  --t-display: clamp(64px, 8.5vw, 168px);
  --t-h1:      clamp(48px, 5.5vw, 104px);
  --t-h2:      clamp(36px, 3.6vw, 64px);
  --t-h3:      clamp(24px, 2.0vw, 36px);
  --t-h4:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-mono:    12px;
  --t-micro:   11px;

  /* — RHYTHM ——————————————————————————————————————— */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --gap-8: 64px;
  --gap-9: 96px;
  --gap-10: 128px;

  /* — RADII (technical, not soft) ——————————————————————— */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* — MOTION ——————————————————————————————————————— */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-q:  cubic-bezier(0.16, 1, 0.3, 1);   /* quint, more decisive */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-pulse: 2400ms;
}

/* ============================================================
   GLOBAL RESET (scoped — only inside .tt)
   ============================================================ */
.tt, .tt * { box-sizing: border-box; }
.tt {
  font-family: var(--font-sans);
  color: var(--fg-100);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.tt h1, .tt h2, .tt h3, .tt h4, .tt p { margin: 0; }
.tt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ============================================================
   FOUNDATION — page background with grid + node hint
   Use as <div class="tt-stage">…</div>
   ============================================================ */
.tt-stage {
  position: relative;
  background: var(--ink-050);
  color: var(--fg-100);
  isolation: isolate;
  overflow: hidden;
}
.tt-stage::before {
  /* Faint architectural grid — 64px column, 64px row */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}
.tt-stage::after {
  /* SVG noise — fine grain, premium */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.tt-stage > * { position: relative; z-index: 1; }

/* Soft directional commerce light coming from top-right of any stage */
.tt-stage--lit::before {
  background-image:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(149, 242, 15, 0.10), transparent 60%),
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.tt-mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.04em; }
.tt-micro { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.tt-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.tt-italic { font-style: italic; }

.tt-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-300);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
}
.tt-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ember-500);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--ember-glow);
}

.tt-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-300) 20%, var(--rule-300) 80%, transparent);
}

/* Pulse for "live" indicators */
@keyframes tt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
.tt-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-live);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
  animation: tt-pulse var(--dur-pulse) var(--ease-in-out) infinite;
}

/* Connection-line pulse along an SVG stroke */
@keyframes tt-flow {
  to { stroke-dashoffset: -24; }
}

/* Subtle float for interface cards */
@keyframes tt-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Counter / metric tick */
@keyframes tt-tick {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}