/* ==========================================================================
   aimendev design tokens — v0.1
   Evidence base: 21 landing clones (see /root/design-system/report.md).
   Naming follows shadcn semantic aliases on top of a Radix-style 12-step ramp,
   exposed as Tailwind v4 compatible custom properties.
   ========================================================================== */

:root {
  /* --- neutral ramp (observed: #fafafa #f5f5f5 #e5e7eb #6b7280 #111111 #000) */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* --- accent (observed default: #3b82f6, 8 of 21 clones) */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* --- status */
  --green-500: #22c55e;
  --amber-500: #f59e0b;
  --red-500:   #ef4444;

  /* --- semantic aliases: light theme --- */
  --bg:            var(--gray-50);
  --bg-subtle:     var(--gray-100);
  --panel:         #ffffff;
  --panel-hover:   var(--gray-50);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --text:          var(--gray-900);
  --text-muted:    var(--gray-500);
  --text-faint:    #68727f;
  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-soft:   var(--blue-50);
  --accent-fg:     #ffffff;
  --ring:          color-mix(in srgb, var(--accent) 40%, transparent);
  --success:       #15803d;
  --warning:       #b45309;
  --danger:        #dc2626;

  /* --- type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem;  /* 11px  label */
  --text-xs:  0.75rem;    /* 12px  caption */
  --text-sm:  0.8125rem;  /* 13px  ui */
  --text-base:0.875rem;   /* 14px  body */
  --text-md:  1rem;       /* 16px  body-lg */
  --text-lg:  1.125rem;   /* 18px  h4 */
  --text-xl:  1.25rem;    /* 20px  h3 */
  --text-2xl: 1.5rem;     /* 24px  h2 */
  --text-3xl: 2rem;       /* 32px  h1 */
  --text-4xl: 2.5rem;     /* 40px  display */
  --text-5xl: 3.5rem;     /* 56px  hero */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal:1.55;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;

  /* --- space (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;

  /* --- radius (observed cluster: 4 / 8 / 999) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* --- elevation: two levels only */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px -12px rgba(16, 24, 40, .25);
  --shadow-lg: 0 24px 60px -32px rgba(16, 24, 40, .35);

  /* --- motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* --- layout */
  --container: 1200px;
  --container-narrow: 760px;
}

/* --- dark theme: the default for dashboards and this gallery --------------- */
[data-theme="dark"] {
  --bg:            #07090d;
  --bg-subtle:     #0d1117;
  --panel:         #11161f;
  --panel-hover:   #151b26;
  --border:        #1c2331;
  --border-strong: #2a3446;
  --text:          #e8eef7;
  --text-muted:    #8a97a8;
  --text-faint:    #79859a;
  --accent:        #4f8cff;
  --accent-hover:  #6ea0ff;
  --accent-soft:   rgba(79, 140, 255, .12);
  --accent-fg:     #04070c;
  --ring:          rgba(79, 140, 255, .38);
  --success:       #4ade80;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 30px -16px rgba(0, 0, 0, .8);
  --shadow-lg: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

/* ==========================================================================
   Base primitives — do not restyle per page; extend with modifiers instead.
   ========================================================================== */

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 38px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: 600 var(--text-base)/1 var(--font-sans); letter-spacing: -0.01em;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--accent); color: var(--accent-fg); }
.ds-btn--primary:hover { background: var(--accent-hover); }
.ds-btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.ds-btn--ghost:hover { background: var(--panel-hover); }
.ds-btn--soft { background: var(--accent-soft); color: var(--accent); }
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.ds-input {
  height: 38px; width: 100%; padding: 0 var(--space-3);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: 400 var(--text-base)/1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-input::placeholder { color: var(--text-faint); }
.ds-input:focus, .ds-input.is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.ds-input[disabled], .ds-input:disabled { opacity: .5; cursor: not-allowed; }

.ds-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font: 500 var(--text-2xs)/1.6 var(--font-mono); letter-spacing: .02em;
  background: var(--panel-hover); color: var(--text-muted); border: 1px solid var(--border);
}
.ds-badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.ds-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }