@import 'tailwindcss';

/* Tailwind v4 scans these for utility usage (Blade + compiled views). */
@source '../views';
@source '../../app/Livewire';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/* ── Clusev design tokens — "Tactical Terminal" (handoff §6) ───────────── */
@theme {
    /* surfaces */
    --color-void: #06080A;
    --color-base: #0A0D10;
    --color-surface: #0F1318;
    --color-raised: #141A20;
    --color-inset: #0B0E12;

    /* brand — use opacity utilities for tints (bg-accent/10, border-accent/25) */
    --color-accent: #FF6B2C;
    --color-accent-bright: #FF8A4D;
    --color-accent-deep: #E25617;
    --color-accent-text: #FF9259;

    /* cyan counter-accent */
    --color-cyan: #43C1D8;
    --color-cyan-bright: #74D7E8;

    /* status triad */
    --color-online: #35D07F;
    --color-warning: #E8B931;
    --color-offline: #FF5247;

    /* text ramp → text-ink / text-ink-2 ... */
    --color-ink: #E9EEF3;
    --color-ink-2: #9DAAB6;
    --color-ink-3: #69757F;
    --color-ink-4: #495159;

    /* hairline borders → border-line ... */
    --color-line: rgba(255, 255, 255, 0.10);
    --color-line-soft: rgba(255, 255, 255, 0.055);
    --color-line-strong: rgba(255, 255, 255, 0.17);

    /* fonts — TODO(§12): self-host the .woff2; falls back until then */
    --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* radii → rounded-* */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
}

/* ── base layer ───────────────────────────────────────────────────────── */
@layer base {
    html {
        color-scheme: dark;
    }

    body {
        background-color: var(--color-base);
        color: var(--color-ink);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* numbers/IPs/paths render mono */
    .tabular {
        font-variant-numeric: tabular-nums;
    }
}