@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views/**/*.blade.php';
@source '../../app/Livewire/**/*.php';

/* =============================================================================
   ZyloVPN design tokens
   -----------------------------------------------------------------------------
   The whole product is one dark theme — a VPN dashboard is a control surface,
   and a light variant would double the design surface for no user benefit.
   Colours are therefore absolute rather than semantic light/dark pairs.

   Depth is built from four near-black steps rather than borders alone, so
   panels separate by luminance the way real hardware UI does. Electric blue is
   the action colour; cyan is reserved for live/connected state so "something is
   happening right now" always reads the same way across the product.
   ========================================================================== */

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Space Grotesk', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Surfaces: darkest page shell up to raised cards ------------------ */
    --color-void: #04060c;
    --color-abyss: #070b15;
    --color-navy: #0b1220;
    --color-surface: #0e1728;
    --color-raised: #131f36;

    --color-line: #1b2942;
    --color-line-strong: #27385a;

    /* --- Electric blue: primary action ----------------------------------- */
    --color-electric-50: #eaf2ff;
    --color-electric-100: #d3e4ff;
    --color-electric-200: #a8c8ff;
    --color-electric-300: #7aa8ff;
    --color-electric-400: #4d86ff;
    --color-electric-500: #2563ff;
    --color-electric-600: #1249e6;
    --color-electric-700: #0d38b4;
    --color-electric-800: #0b2c8a;
    --color-electric-900: #0a2266;

    /* --- Cyan: live state, connection, telemetry ------------------------- */
    --color-cyan-300: #6ee7f9;
    --color-cyan-400: #22d3ee;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;

    /* --- Silver: text ---------------------------------------------------- */
    --color-silver-100: #eef3fa;
    --color-silver-200: #ccd8e8;
    --color-silver-300: #9fb0c9;
    --color-silver-400: #7285a3;
    --color-silver-500: #4e6183;

    /* --- Status ---------------------------------------------------------- */
    --color-success: #22c55e;
    --color-success-dim: #15803d;
    --color-warning: #f59e0b;
    --color-warning-dim: #b45309;
    --color-danger: #ef4444;
    --color-danger-dim: #b91c1c;
    --color-info: #38bdf8;

    /* --- Glow: used sparingly, only on focus/active/live ------------------ */
    --shadow-glow-sm: 0 0 12px -2px rgb(37 99 255 / 0.45);
    --shadow-glow: 0 0 28px -6px rgb(37 99 255 / 0.55);
    --shadow-glow-cyan: 0 0 28px -6px rgb(34 211 238 / 0.55);
    --shadow-panel: 0 1px 0 0 rgb(255 255 255 / 0.03) inset,
        0 12px 32px -12px rgb(0 0 0 / 0.8);

    --radius-panel: 0.875rem;

    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================================
   Base
   ========================================================================== */

@layer base {
    * {
        border-color: var(--color-line);
    }

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

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

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        color: var(--color-silver-100);
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }

    /* One consistent focus treatment everywhere. Never removed without a
       replacement — keyboard users navigate this panel too. */
    :focus-visible {
        outline: 2px solid var(--color-electric-400);
        outline-offset: 2px;
        border-radius: 0.375rem;
    }

    ::selection {
        background-color: var(--color-electric-600);
        color: white;
    }

    /* Keeps Alpine-controlled elements hidden until Alpine initialises,
       otherwise mobile menus and modals flash open on first paint. */
    [x-cloak] {
        display: none !important;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--color-abyss);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-line-strong);
        border-radius: 9999px;
        border: 2px solid var(--color-abyss);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-silver-500);
    }

    /* Respect the OS setting rather than animating regardless. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* =============================================================================
   Component primitives
   -----------------------------------------------------------------------------
   Only patterns repeated across many Blade components live here. Anything used
   once stays as utilities in the markup.
   ========================================================================== */

@layer components {
    /* Frosted panel. The gradient is what stops large dark cards reading flat. */
    .zylo-panel {
        background-image: linear-gradient(
            160deg,
            color-mix(in oklab, var(--color-surface) 92%, white) 0%,
            var(--color-surface) 45%,
            var(--color-navy) 100%
        );
        border: 1px solid var(--color-line);
        border-radius: var(--radius-panel);
        box-shadow: var(--shadow-panel);
    }

    .zylo-glass {
        background-color: color-mix(in oklab, var(--color-navy) 72%, transparent);
        backdrop-filter: blur(14px) saturate(140%);
        border: 1px solid color-mix(in oklab, var(--color-line-strong) 70%, transparent);
    }

    /* Hairline that fades at both ends — reads as a seam rather than a rule. */
    .zylo-divider {
        height: 1px;
        background-image: linear-gradient(
            90deg,
            transparent,
            var(--color-line-strong) 18%,
            var(--color-line-strong) 82%,
            transparent
        );
    }

    .zylo-grid-bg {
        background-image:
            linear-gradient(color-mix(in oklab, var(--color-line) 55%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklab, var(--color-line) 55%, transparent) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 75%);
    }

    /* Gradient text for headline accents. */
    .zylo-gradient-text {
        background-image: linear-gradient(
            100deg,
            var(--color-silver-100) 0%,
            var(--color-electric-300) 45%,
            var(--color-cyan-400) 100%
        );
        background-clip: text;
        color: transparent;
    }
}

/* =============================================================================
   Utilities
   ========================================================================== */

@layer utilities {
    .text-glow {
        text-shadow: 0 0 18px rgb(37 99 255 / 0.55);
    }

    /* Live-state pulse for connected indicators. */
    .zylo-pulse::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: currentColor;
        animation: zylo-ping 1.8s var(--ease-out-quint) infinite;
    }

    @keyframes zylo-ping {
        0% { transform: scale(1); opacity: 0.55; }
        70%, 100% { transform: scale(2.4); opacity: 0; }
    }

    /* Masks long key material without hiding it from copy-to-clipboard. */
    .zylo-redact {
        filter: blur(5px);
        transition: filter 180ms var(--ease-out-quint);
    }

    .zylo-redact:hover,
    .zylo-redact:focus-within {
        filter: none;
    }
}