/* ============================================================
   CryptoPlexTrade — "Clarity" Design Tokens
   Single source of truth for the public portal, admin portal and
   marketing pages. Load this file BEFORE app.css / admin.css /
   style.css / responsive.css.

   Palette rule: white dominates (85%+ surface area).
   Blue is the accent language and is expressed as a ramp:
   delicate ice-blue tints for fills & active troughs,
   vibrant royal & sky blue for CTA buttons & focal points,
   deep navy ink for headings & financial values.
   ============================================================ */

:root {
    /* ── Blue Ramp (brand core #005baa) ─────────────────────── */
    --blue-050: #f4f8fc;   /* Softest ice wash */
    --blue-100: #e8f2fa;   /* Pill background, active troughs */
    --blue-200: #d0e4f7;   /* Subtle accent border */
    --blue-300: #a3cbf1;   /* Hover border */
    --blue-400: #58a5e7;   /* Vibrant sky blue */
    --blue-500: #1a82d8;   /* Electric action blue */
    --blue-600: #005baa;   /* Royal Cobalt — sovereign brand core */
    --blue-700: #004685;   /* Deep Navy — hover & active headers */
    --blue-800: #083460;   /* Deep slate navy */
    --blue-900: #0b2341;   /* Dark navy */
    --blue-950: #0a192c;   /* Ink — headings & primary text */

    --cyan-050: #f0faff;
    --cyan-100: #e0f4fe;
    --cyan-200: #b9e6fc;
    --cyan-300: #7cd2f8;
    --cyan-400: #00a9e0;   /* Electric Cyan — highlights & focus */
    --cyan-500: #0091c4;

    /* ── Brand aliases (kept for existing markup) ───────────── */
    --primary:          #005baa;
    --primary-dark:     #004685;
    --primary-light:    #00a9e0;
    --primary-pale:     #f4f8fc;
    --primary-hover:    #004685;
    --primary-soft:     #e8f2fa;
    --primary-color:    var(--primary);
    --secondary-color:  var(--primary-light);
    --royal-blue:       var(--primary);
    --blue-main:        var(--primary);
    --accent-cyan:      var(--primary-light);
    --electric-cyan:    var(--primary-light);
    --cyan-glow:        rgba(0, 169, 224, 0.16);

    /* ── Gradients ─────────────────────────────────────────── */
    --primary-gradient:        linear-gradient(135deg, #005baa 0%, #0077c8 100%);
    --primary-gradient-hover:  linear-gradient(135deg, #004685 0%, #005baa 100%);
    --accent-gradient:         linear-gradient(135deg, #0077c8 0%, #00a9e0 100%);
    --hero-gradient:           radial-gradient(circle at 50% 0%, #eaf4fd 0%, #f6fafd 55%, #ffffff 100%);
    --card-gradient-subtle:    linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);

    /* ── Surfaces: white first (85%+ white dominance) ───────── */
    --bg:                 #ffffff;   /* Pure white page canvas */
    --bg-canvas:          #f6f9fc;   /* Soft blue-gray canvas backdrop */
    --bg-light:           #f6f9fc;   /* Section band */
    --bg-subtle:          #edf4fb;   /* Recessed troughs, table headers */
    --bg-white:           #ffffff;   /* Card canvas */
    --surface-card:       #ffffff;
    --bg-card:            #ffffff;
    --surface-subtle:     #f4f8fc;
    --bg-surface:         #f4f8fc;
    --bg-surface-hover:   #eaf2fb;
    --surface-input:      #ffffff;
    --bg-input:           #ffffff;
    --bg-highlight:       #eaf3fc;   /* Selected row / active tab */
    --bg-highlight-strong:#dbeaf8;

    /* ── Inverses & overlays ───────────────────────────────── */
    --bg-dark:            #0a192c;
    --dark-bg:            #ffffff;   /* Replaced: dark-bg alias points to white in Clarity */
    --dark-surface:       #f4f8fc;   /* Replaced: dark-surface alias points to soft surface */
    --dark-card:          #ffffff;   /* Replaced: dark-card alias points to pure white */
    --dark-card-hover:    #f8fafd;
    --deep-navy:          #0a192c;

    /* ── Borders: cool blue-greys ───────────────────────────── */
    --border:             #e2edf7;
    --border-light:       #edf4fb;
    --border-subtle:      #f0f5fa;
    --border-mid:         #d0e3f5;
    --border-medium:      #d0e3f5;
    --border-strong:      #b8d3ee;
    --border-glass:       rgba(0, 91, 170, 0.08);
    --border-color:       var(--border);
    --border-focus:       var(--primary);
    --cyber-border:       #e2edf7;
    --cyber-border-bright:#b8d3ee;

    /* ── Typography hierarchy: navy ink on white ────────────── */
    --text-1:             #0a192c;   /* Headings, financial values */
    --text-primary:       #0a192c;
    --text-2:             #3e5369;   /* Body copy, form labels */
    --text-body:          #3e5369;
    --text-3:             #6c8299;   /* Captions, timestamps */
    --text-secondary:     #6c8299;
    --text-muted:         #8fa4b8;
    --text-inverse:       #ffffff;
    --text-on-primary:    #ffffff;

    /* ── Financial + status semantics (tuned for white) ─────── */
    --green:              #0e9f6e;
    --accent-green:       #0e9f6e;
    --green-strong:       #067647;
    --green-bg:           #eefbf4;
    --green-border:       #b9e6cd;
    --bull-green:         var(--green);

    --red:                #e5484d;
    --accent-red:         #e5484d;
    --red-strong:         #c22731;
    --red-bg:             #fef2f2;
    --red-border:         #f7c4c6;
    --bear-red:           var(--red);

    --orange:             #f59e0b;
    --accent-orange:      #f59e0b;
    --orange-strong:      #b45309;
    --orange-bg:          #fffbeb;
    --orange-border:      #fde68a;

    --status-green:        #067647;
    --status-green-bg:     #eefbf4;
    --status-green-border: #b9e6cd;
    --status-amber:        #b45309;
    --status-amber-bg:     #fffbeb;
    --status-amber-border: #fde68a;
    --status-red:          #c22731;
    --status-red-bg:       #fef2f2;
    --status-red-border:   #f7c4c6;
    --status-blue:         #005baa;
    --status-blue-bg:      #edf5fd;
    --status-blue-border:  #c2e1fb;

    /* ── Elevation: soft, blue-tinted, never muddy ──────────── */
    --shadow-xs:        0 1px 2px rgba(11, 45, 90, 0.04);
    --shadow-sm:        0 1px 3px rgba(11, 45, 90, 0.05), 0 1px 2px rgba(11, 45, 90, 0.03);
    --shadow-md:        0 4px 16px rgba(11, 45, 90, 0.06), 0 1px 3px rgba(11, 45, 90, 0.03);
    --shadow-lg:        0 12px 32px rgba(11, 45, 90, 0.08), 0 2px 8px rgba(11, 45, 90, 0.03);
    --shadow-xl:        0 24px 56px rgba(11, 45, 90, 0.12);
    --shadow-subtle:    0 1px 3px rgba(11, 45, 90, 0.04);
    --shadow-medium:    0 4px 16px rgba(11, 45, 90, 0.06);
    --shadow-blue:      0 6px 20px rgba(0, 91, 170, 0.22);
    --shadow-cyan:      0 0 0 3px rgba(0, 169, 224, 0.14);
    --ring:             0 0 0 3px rgba(0, 91, 170, 0.14);

    /* ── Layout & Shape ─────────────────────────────────────── */
    --sidebar-width:    264px;
    --topbar-height:    64px;
    --tabbar-height:    68px;
    --radius-sm:        10px;
    --radius-md:        14px;
    --radius-lg:        20px;
    --radius-xl:        26px;
    --radius-pill:      9999px;
    --radius:           var(--radius-md);

    /* ── Motion ─────────────────────────────────────────────── */
    --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate:   cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:     140ms;
    --duration-standard: 240ms;

    /* ── Type stacks ────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- Foundational reset + body canvas (shared by every entrypoint) --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-height: 100%;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-2);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Selection: brand blue on white text */
::selection        { background: var(--primary); color: #ffffff; }
::-moz-selection   { background: var(--primary); color: #ffffff; }

/* Tabular numerals for every financial figure */
.tabular-nums, .kpi-card__value, .market-item__price, .price, .data-table td, .tabular {
    font-variant-numeric: tabular-nums;
}

.mono, .crypto-hash, .wallet-address {
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

/* Respect reduced motion across all interfaces */
@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;
    }
}