/* ============================================================================
   MineAdz — Design tokens
   ----------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius, shadow, motion
   and layering. Every page links this file BEFORE its own styles.

   The legacy variable names (--bg, --primary, --text, --card, --border,
   --text-dim, --danger, --success, --accent, --star, --nav-height, --input-bg,
   --card-bg, --glass-bg, --sidebar) are all defined here on purpose: the page
   templates already reference them, so they keep working untouched. What
   changes is that they now hold ONE set of values instead of thirteen.

   Before this file, server.html / dashboard/editor.html / dashboard/settings.html
   / auth/action.html ran a blue #3b82f6 theme on a #050608 background while
   every other page ran a different theme from the rest. They are one product
   now, and the brand colour lives only in the --primary block below.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* --- Brand -----------------------------------------------------------
       Blue on dark. --primary is the accent used for text, icons, borders and
       glows; --primary-deep is what solid buttons use, because white label
       text on --primary only reaches 3.8:1 contrast whereas on --primary-deep
       it reaches 4.7:1 and passes WCAG AA.

       --primary-rgb exists so page CSS can write rgba(var(--primary-rgb), .12)
       instead of hardcoding the channels. Everything in the app now does, so
       changing the brand colour is genuinely this one block. */
    --primary: #2f81f7;
    --primary-rgb: 47, 129, 247;
    --primary-strong: #58a6ff;
    --primary-deep: #1f6feb;
    --primary-glow: rgba(var(--primary-rgb), 0.30);
    --primary-soft: rgba(var(--primary-rgb), 0.12);
    --primary-line: rgba(var(--primary-rgb), 0.28);
    --primary-contrast: #ffffff;

    /* --- Surfaces --------------------------------------------------------- */
    --bg: #111216;
    --bg-deep: #0a0b0e;
    --surface-1: #16171c;
    --surface-2: #1b1d23;
    --surface-3: #22242b;
    --card: #18191e;
    --card-bg: rgba(24, 25, 30, 0.75);
    --glass-bg: rgba(24, 25, 30, 0.75);
    --glass-strong: rgba(15, 16, 20, 0.88);
    --sidebar: #14151a;
    --input-bg: rgba(255, 255, 255, 0.035);
    --overlay: rgba(6, 7, 9, 0.72);

    /* --- Text ------------------------------------------------------------- */
    --text: #f3f4f6;
    --text-soft: #d2d5db;
    --text-dim: #9ca3af;
    --text-faint: #6b7280;

    /* --- Lines ------------------------------------------------------------ */
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-bright: rgba(255, 255, 255, 0.20);

    /* --- Status ----------------------------------------------------------- */
    /* Success stays green regardless of the brand colour -- green means
       "worked / online" to everyone, and reusing the brand blue for it would
       make a confirmation indistinguishable from a link. */
    --success: #00c853;
    --success-rgb: 0, 200, 83;
    --success-soft: rgba(var(--success-rgb), 0.12);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, 0.12);

    /* --- Accents (kept for existing page rules) --------------------------- */
    --accent: #84cc16;
    --star: #fbbf24;
    --emerald: #10b981;
    --emerald-glow: rgba(16, 185, 129, 0.2);
    --amber: #f59e0b;
    --amber-glow: rgba(245, 158, 11, 0.2);
    --rose: #f43f5e;
    --coin: #fbbf24;
    --credit: #38bdf8;

    /* --- Type ------------------------------------------------------------- */
    --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

    /* Fluid scale — min at 360px, max at 1280px. Nothing overflows a phone,
       nothing looks undersized on a desktop. */
    --fs-xs:    clamp(0.75rem, 0.72rem + 0.13vw, 0.813rem);
    --fs-sm:    clamp(0.844rem, 0.81rem + 0.15vw, 0.906rem);
    --fs-base:  clamp(0.938rem, 0.90rem + 0.19vw, 1.031rem);
    --fs-md:    clamp(1.031rem, 0.98rem + 0.25vw, 1.156rem);
    --fs-lg:    clamp(1.156rem, 1.07rem + 0.42vw, 1.375rem);
    --fs-xl:    clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
    --fs-2xl:   clamp(1.625rem, 1.34rem + 1.38vw, 2.25rem);
    --fs-3xl:   clamp(2rem, 1.52rem + 2.35vw, 3rem);
    --fs-4xl:   clamp(2.5rem, 1.63rem + 4.24vw, 4.25rem);

    /* Spacious by default — this is what makes the copy breathe. */
    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.65;
    --lh-loose: 1.8;

    --ls-tight: -0.03em;
    --ls-snug: -0.015em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-caps: 0.08em;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Measure — caps line length so paragraphs stay readable. */
    --measure: 68ch;
    --measure-narrow: 52ch;

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

    /* Section rhythm scales with the viewport so mobile isn't wastefully airy
       and desktop isn't cramped. */
    --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
    --gutter: clamp(1rem, 0.55rem + 2vw, 2rem);

    /* --- Layout ----------------------------------------------------------- */
    --page-max: 1200px;
    --page-wide: 1440px;
    --nav-height: 72px;
    --gap: var(--sp-6);

    /* --- Radius ----------------------------------------------------------- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-pill: 999px;

    /* --- Shadow ----------------------------------------------------------- */
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sh-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --sh-lg: 0 18px 46px rgba(0, 0, 0, 0.50);
    --sh-xl: 0 30px 80px rgba(0, 0, 0, 0.62);
    --sh-glow: 0 8px 32px var(--primary-glow);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* --- Motion ----------------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-fast: 0.15s;
    --t-base: 0.25s;
    --t-slow: 0.4s;

    /* --- Blur ------------------------------------------------------------- */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;

    /* --- Layers ----------------------------------------------------------- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 1000;
    --z-drawer: 1500;
    --z-overlay: 2000;
    --z-dialog: 2100;
    --z-toast: 2200;
}

/* Backdrop blur is the single most expensive thing on this site. Mid-range
   phones drop frames scrolling a page full of it, so below the tablet break we
   trade the blur for a solid surface that reads almost identically. */
@media (max-width: 900px) {
    :root {
        --blur-sm: 0px;
        --blur-md: 0px;
        --blur-lg: 0px;
        --card-bg: #1a1b21;
        --glass-bg: #1a1b21;
        --glass-strong: #16171c;
    }
}

/* Respect the OS setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0.01ms;
        --t-base: 0.01ms;
        --t-slow: 0.01ms;
    }
}