/**
 * GAURAV CAPITAL — OPB Institutional FinTech Design System (v5.0 - Universal Architecture)
 * Centralized Token Architecture, Semantic Surfaces, High-Contrast Borders, Tabular Numerals & Component Standards
 */

:root {
    /* 1. Variable Typography Tokens (2026 Modern Standard) */
    --font-ui:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display:           'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-data:              'Inter', -apple-system, sans-serif;
    --font-mono:              'JetBrains Mono', 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
    --font-feature-settings:  "tnum" 1, "zero" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;

    /* Typographic Scale Tokens */
    --font-xs:                0.72rem;
    --font-sm:                0.80rem;
    --font-base:              0.875rem;
    --font-md:                0.95rem;
    --font-lg:                1.15rem;
    --font-xl:                1.45rem;
    --font-2xl:               1.85rem;
    --font-3xl:               2.25rem;

    --fw-normal:              400;
    --fw-medium:              500;
    --fw-semibold:            600;
    --fw-bold:                700;
    --fw-extrabold:           800;

    /* 2. Centralized 4-Tier Surface Architecture */
    --opb-surface-base:       var(--bg-primary, #080c14);
    --opb-surface-panel:      var(--bg-secondary, #0f172a);
    --opb-surface-card:       var(--bg-card, #131e33);
    --opb-surface-card-hover: var(--bg-card-hover, #182744);
    --opb-surface-input:      var(--input-bg, #0b1120);
    --opb-surface-overlay:    rgba(15, 23, 42, 0.95);

    /* 3. Semantic Market Palettes */
    --market-buy:             var(--success-color, #16a34a);
    --market-buy-bg:          rgba(22, 163, 74, 0.14);
    --market-buy-border:      rgba(22, 163, 74, 0.45);
    
    --market-sell:            var(--danger-color, #dc2626);
    --market-sell-bg:         rgba(220, 38, 38, 0.14);
    --market-sell-border:     rgba(220, 38, 38, 0.45);

    --market-neutral:         var(--accent-color, #38bdf8);
    --market-neutral-bg:      rgba(56, 189, 248, 0.14);
    --market-neutral-border:  rgba(56, 189, 248, 0.45);

    --market-warning:         var(--warning-color, #d97706);
    --market-warning-bg:      rgba(217, 119, 6, 0.14);
    --market-warning-border:  rgba(217, 119, 6, 0.45);

    --accent-primary:         var(--accent-color, #38bdf8);
    --accent-gradient:        var(--accent-gradient, linear-gradient(135deg, #0284c7 0%, #2563eb 100%));

    /* 4. High-Contrast Border & Radius Tokens */
    --border-width:           1px;
    --border-width-thick:     2px;
    --border-subtle:          var(--border-color, #1e293b);
    --border-hover:           var(--border-color-hover, var(--accent-color, #38bdf8));

    --radius-xs:              0.25rem;
    --radius-sm:              0.375rem;
    --radius-md:              0.50rem;
    --radius-lg:              0.75rem;
    --radius-xl:              1.00rem;
    --radius-2xl:             1.25rem;
    --radius-full:            9999px;

    /* 5. Elevation & Shadow Tokens */
    --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:              0 4px 12px -2px rgba(0, 0, 0, 0.15);
    --shadow-lg:              0 10px 25px -5px rgba(0, 0, 0, 0.25);
    --shadow-xl:              var(--card-shadow, 0 20px 40px -15px rgba(0, 0, 0, 0.5));
    --shadow-glow:            0 0 20px var(--header-glow, rgba(56, 189, 248, 0.2));

    /* 6. Strict Tabular Numerals */
    --font-tabular:           "Inter", -apple-system, sans-serif;
}

/* Universal High-Contrast Base Styles */
body {
    font-family: var(--font-ui);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-feature-settings: var(--font-feature-settings);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* Tabular Numerals for Financial Data */
.tabular-nums, .num, .stat-value, .financial-figure, [data-tabular="true"] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "zero" 1 !important;
    font-family: var(--font-mono), monospace;
}

/* Universal Text Boundary & Overflow Guard */
.opb-text-bound, .config-desc-box, .opb-card, p, span, div {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Component Standards */
.opb-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.opb-card:hover {
    border-color: var(--border-color-hover);
}

.opb-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-sm);
}
.opb-stat-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.opb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-base);
}
.opb-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
}
.opb-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.opb-table tr:hover td {
    background: var(--bg-card-hover);
}

.opb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}
.opb-badge-buy {
    background: var(--market-buy-bg);
    color: var(--market-buy);
    border-color: var(--market-buy-border);
}
.opb-badge-sell {
    background: var(--market-sell-bg);
    color: var(--market-sell);
    border-color: var(--market-sell-border);
}
.opb-badge-neutral {
    background: var(--market-neutral-bg);
    color: var(--market-neutral);
    border-color: var(--market-neutral-border);
}
.opb-badge-warning {
    background: var(--market-warning-bg);
    color: var(--market-warning);
    border-color: var(--market-warning-border);
}

.opb-tab-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.35rem;
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.opb-tab {
    padding: 0.45rem 1.15rem;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.opb-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.opb-tab.active {
    background: var(--accent-gradient);
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
}

.opb-input, .opb-select {
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: var(--fw-semibold);
    outline: none;
    transition: all 0.2s ease;
}
.opb-input:focus, .opb-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
    background: var(--bg-card);
}

/* Cockpit Control Tile Abstractions */
.cockpit-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.cockpit-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: all 0.15s ease;
}
.cockpit-tile:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.cockpit-label {
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cockpit-hint {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 0.2rem;
}
.cockpit-hint i {
    color: var(--accent-color);
    margin-right: 0.3rem;
}