/* ============================================================
   Oorit — Design tokens
   Derived from CreatorFlow DS · brand accent overridden to yellow
   ============================================================ */

:root {
  /* ---------- Palette: dark (default) ---------- */
  --bg:        #0b0b0d;          /* near-black, slightly cool */
  --surface:   #131316;          /* card, input bg */
  --surface-2: #1a1a1f;          /* elevated card */
  --surface-3: #232329;          /* hover */
  --line:      #26262d;          /* hairline borders */
  --line-2:    #34343c;          /* slightly stronger */

  --text:      #ededf0;
  --text-2:    #b4b4bc;          /* secondary */
  --text-3:    #6e6e78;          /* tertiary, captions */
  --text-mute: #4a4a52;

  /* Accents — Oorit yellow */
  --accent:        #FFE94B;      /* signature yellow — CTA / focus */
  --accent-ink:    #0b0b0d;      /* text on accent */
  --accent-soft:   #2a2814;      /* tinted bg for accent regions */

  /* Semantics */
  --success:   #6ee7a4;
  --warn:      #ffcf66;
  --danger:    #ff6e7a;
  --info:      #a6c8ff;

  /* ---------- Typography ---------- */
  --font-sans:    'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Inter Tight', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-relax:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-mono:    0.04em;     /* uppercase mono labels */

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---------- Radius ---------- */
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.5);
  --shadow-lg:  0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(255,233,75,0.35), 0 6px 24px rgba(255,233,75,0.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, textarea, select { font-family: inherit; color: inherit; }
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
button:hover, a:hover { opacity: 0.85; }
::selection { background: var(--accent); color: var(--accent-ink); }
input::placeholder { color: var(--text-mute); }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Mono uppercase label */
.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-3);
}