/* Design tokens. THE ONE THEME FILE.
 *
 * Re-theming the app = editing this file. Every other CSS file uses
 * variables defined here. The "investigation UI variable aliases"
 * section maps the investigation_agent UI's tokens (`--accent`,
 * `--ok`, etc.) onto our PLG palette so its CSS works unchanged.
 */

:root {
    /* The app is light-themed. Declare it so native form controls —
       notably the open <select> option list, which CSS can't restyle —
       render light instead of inheriting the OS dark theme (which made
       the filter dropdowns a dark, off-theme popup). */
    color-scheme: light;

    /* === PLG palette ============================================== */
    --primary:        #4f46e5;   /* indigo-600 */
    --primary-h:      #4338ca;   /* indigo-700 */
    --primary-tint:   #eef2ff;   /* indigo-50  */
    --primary-soft:   rgba(79, 70, 229, 0.10);

    --success:        #059669;   /* emerald-600 */
    --success-tint:   #ecfdf5;
    --success-soft:   rgba(5, 150, 105, 0.10);

    --danger:         #dc2626;   /* red-600   */
    --danger-tint:    #fef2f2;
    --danger-soft:    rgba(220, 38, 38, 0.10);

    --warn:           #d97706;   /* amber-600 */
    --warn-tint:      #fffbeb;
    --warn-soft:      rgba(217, 119, 6, 0.10);

    --info:           #2563eb;   /* blue-600  */
    --info-tint:      #eff6ff;
    --info-soft:      rgba(37, 99, 235, 0.10);

    /* Surfaces */
    --bg:             #f6f7fb;   /* slate-50ish */
    --surface:        #ffffff;
    --surface-2:      #fafbfd;
    --surface-3:      #f1f3f8;

    /* Text */
    --ink:            #0f172a;   /* slate-950 */
    --ink-muted:      #64748b;   /* slate-500 */
    --text-soft:      #475569;   /* slate-600 */
    --muted-2:        #94a3b8;   /* slate-400 */

    /* Borders */
    --border:         #e2e8f0;   /* slate-200 */
    --border-soft:    #f1f5f9;   /* slate-100 */

    /* Hero gradient (landing) */
    --hero-from:      #0b1020;
    --hero-to:        #1e1b4b;
    --hero-ink:       #f8fafc;
    --hero-brand:     #a5b4fc;
    --hero-dot:       #818cf8;

    /* === Investigation-UI aliases (so its CSS works as-is) ======== */
    --accent:         var(--primary);
    --accent-strong:  var(--primary-h);
    --accent-soft:    var(--primary-soft);
    --ok:             var(--success);
    --ok-soft:        var(--success-soft);
    --text:           var(--ink);
    --muted:          var(--ink-muted);

    /* === Typography ============================================== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                 Roboto, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-xs:        12px;
    --text-sm:        14px;
    --text-base:      16px;
    --text-lg:        18px;
    --text-xl:        20px;
    --text-2xl:       24px;
    --text-3xl:       30px;
    --text-4xl:       36px;
    --text-5xl:       48px;

    --leading-tight:  1.25;
    --leading-snug:   1.4;
    --leading-normal: 1.55;
    --leading-loose:  1.7;

    /* === Spacing scale =========================================== */
    --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;

    /* === Radii ================================================== */
    --r-sm:           4px;
    --r-md:           8px;
    --r-lg:           12px;
    --r-xl:           16px;
    --r-pill:         999px;

    /* === Shadows ================================================ */
    --shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md:      0 1px 2px rgba(15, 23, 42, 0.05),
                      0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg:      0 1px 2px rgba(15, 23, 42, 0.05),
                      0 10px 30px rgba(15, 23, 42, 0.08);

    /* === Layout ================================================= */
    --page-w:         1024px;
    --topbar-h:       64px;
}