/* Flaik design tokens — Direction 02 Bold. Light surface, brand pink #e72f58.
   Source: tokens.css from the design bundle. The only place hex/radius/shadow
   values are allowed to live; everything else references var(--…). */
:root {
  --flaik-pink: #e72f58;
  --flaik-pink-50: #fff1f4;
  --flaik-pink-100: #ffe0e8;
  --flaik-pink-600: #d8264f;
  --flaik-pink-700: #b81d40;

  --ink-0: #ffffff;
  --ink-50: #fafaf9;
  --ink-100: #f5f4f1;
  --ink-150: #efedea;
  --ink-200: #e7e5e0;
  --ink-300: #d4d2cd;
  --ink-400: #a8a6a1;
  --ink-500: #6f6d68;
  --ink-600: #4a4945;
  --ink-700: #2a2926;
  --ink-800: #15141a;
  --ink-900: #0a090c;

  --tint-cream: #faf6ee;
  --tint-blush: #fdf3f1;
  --tint-mist:  #f3f5f6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(15,15,20,0.04), 0 0 0 1px rgba(15,15,20,0.04);
  --shadow-sm: 0 2px 6px rgba(15,15,20,0.05), 0 0 0 1px rgba(15,15,20,0.05);
  --shadow-md: 0 8px 24px -8px rgba(15,15,20,0.1), 0 0 0 1px rgba(15,15,20,0.05);
  --shadow-lg: 0 24px 60px -20px rgba(15,15,20,0.18), 0 0 0 1px rgba(15,15,20,0.05);

  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Status dots (job lifecycle) — extend the design palette so components.css
     stays free of hex literals. Pulled from shared.jsx StatusDot. */
  --status-running: #f5a524;
  --status-done:    #1f9d55;
  --status-review:  #6b6b6b;
  --status-failed:  var(--flaik-pink);

  /* Layout constants */
  --max-width: 1320px;
  --gutter:    40px;
  --sidebar:   240px;
  --hire-form: 440px;
}

.flaik-ds {
  font-family: var(--font-body);
  color: var(--ink-800);
  background: var(--ink-0);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
.flaik-ds *,
.flaik-ds *::before,
.flaik-ds *::after { box-sizing: border-box; }

.flaik-ds h1, .flaik-ds h2, .flaik-ds h3, .flaik-ds h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
}

/* Mesh placeholders — abstract gradient art for agent thumbs / gallery samples
   when no creator image exists. Five variants per design system. */
.mesh-a {
  background:
    radial-gradient(120% 80% at 0% 0%,   #ffd9e2 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 0%, #ffe6cf 0%, transparent 50%),
    radial-gradient(120% 100% at 50% 100%, #ffc7d3 0%, transparent 60%),
    var(--tint-blush);
}
.mesh-b {
  background:
    radial-gradient(80% 60% at 100% 0%, #c9d8ff 0%, transparent 60%),
    radial-gradient(100% 80% at 0% 100%, #ffd0db 0%, transparent 60%),
    var(--tint-mist);
}
.mesh-c {
  background:
    radial-gradient(90% 70% at 30% 20%, #ffd6c2 0%, transparent 60%),
    radial-gradient(80% 70% at 80% 100%, #ffb3c4 0%, transparent 60%),
    var(--tint-cream);
}
.mesh-d {
  background:
    conic-gradient(from 220deg at 70% 30%, #ffe2bc, #ffc1d2, #ffe2bc);
}
.mesh-ink {
  background:
    radial-gradient(120% 100% at 0% 0%, #2a2a36 0%, transparent 60%),
    radial-gradient(80% 80% at 100% 100%, var(--flaik-pink) 0%, transparent 55%),
    var(--ink-900);
}

.placeholder-stripes {
  background:
    repeating-linear-gradient(135deg,
      rgba(15,15,20,0.04) 0 8px,
      transparent 8px 16px),
    var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  color: var(--ink-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.flaik-divider { height: 1px; background: var(--ink-200); }
.flaik-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--ink-100); color: var(--ink-700);
  border: 1px solid var(--ink-200);
  white-space: nowrap;
}
.flaik-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flaik-pink); }