/* ============================================================
   TRADEDESK — Enterprise Financial Operations Design System
   Mature, Calibrated, Data-First Financial Back-Office System
   ============================================================ */

:root {
  /* ── Brand ── */
  --brand-name: "TRADEDESK";
  --brand-sub: "Trading Operations";

  /* ── Primary Workspace Surfaces ── */
  --bg: #f4f5f7;                    /* Neutral light gray workspace */
  --bg-subtle: #f8f9fa;             /* Table headers, subtle controls */
  --surface: #ffffff;               /* Pure white content canvas */
  --surface-muted: #f8f9fa;          /* Row hover, secondary input bg */
  --surface-elevated: #ffffff;       /* Modals, drawers, popovers */
  --surface-sidebar: #ffffff;        /* Crisp enterprise sidebar */
  --surface-header: #ffffff;         /* Top utility bar */

  /* ── Typography & Label Colors ── */
  --text-primary: #0f172a;          /* Deep charcoal (slate-900) */
  --text-secondary: #475569;        /* Muted slate (slate-600) */
  --text-muted: #94a3b8;            /* Tertiary slate (slate-400) */
  --text-inverse: #ffffff;          /* Text on dark surfaces */

  /* ── Subtle 1px Borders ── */
  --border: #e2e8f0;                /* Standard 1px structural border (slate-200) */
  --border-subtle: #edf2f7;         /* Very light internal dividers */
  --border-strong: #cbd5e1;         /* Input borders, active states */

  /* ── Single Professional Accent (Not everything blue) ── */
  --primary: #0284c7;               /* Enterprise Sky/Cobalt blue */
  --primary-hover: #0369a1;         /* Darker blue on hover */
  --primary-active: #075985;        /* Active button press */
  --primary-subtle: rgba(2, 132, 199, 0.08); /* Selection / active tint */
  --primary-border: rgba(2, 132, 199, 0.35);

  /* ── Financial Status Colors ── */
  --success: #16a34a;               /* Green for profit / active / buy */
  --success-bg: rgba(22, 163, 74, 0.08);
  --success-border: rgba(22, 163, 74, 0.25);

  --danger: #dc2626;                /* Red for loss / inactive / sell */
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.25);

  --warning: #d97706;               /* Amber for pending / review */
  --warning-bg: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.25);

  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.08);
  --info-border: rgba(2, 132, 199, 0.25);

  --neutral-badge: #475569;
  --neutral-badge-bg: #f1f5f9;
  --neutral-badge-border: #e2e8f0;

  /* ── Radius System (Restrained: 4px, 6px, 8px, 10px) ── */
  --radius-xs: 4px;                 /* Badges, tags, chips */
  --radius-sm: 6px;                 /* Buttons, inputs, filter controls */
  --radius-md: 8px;                 /* Panels, table containers, cards */
  --radius-lg: 10px;                /* Modals */
  --radius-full: 9999px;            /* Avatar circles, toggles only */

  /* Alias tokens */
  --radius-badge: var(--radius-xs);
  --radius-btn: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-modal: var(--radius-lg);

  /* ── Typography Scale ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;

  --text-page-title: 650 26px/1.2 var(--font-sans);
  --text-section-title: 600 17px/1.3 var(--font-sans);
  --text-body: 400 14px/1.45 var(--font-sans);
  --text-body-strong: 600 14px/1.45 var(--font-sans);
  --text-secondary: 400 13px/1.4 var(--font-sans);
  --text-caption: 400 12px/1.33 var(--font-sans);
  --text-micro: 500 11px/1.25 var(--font-sans);

  /* ── Spacing Scale (Strict 4px/8px Grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Layout Dimensions ── */
  --sidebar-width: 240px;
  --header-height: 52px;
  --max-content-width: 1600px;
  --table-row-height: 60px;
  --input-height: 40px;
  --btn-height: 36px;
  --btn-sm-height: 30px;

  /* ── Shadows (Restrained: No shadow on standard surfaces) ── */
  --shadow-none: none;
  --shadow-card: none;
  --shadow-dropdown: 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow-modal: 0 20px 48px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow-drawer: -4px 0 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.06);

  /* ── Transitions ── */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;

  /* ── Z-Index Scale ── */
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Backward Compatibility Variables for Legacy CSS */
  --color-accent: var(--primary);
  --color-accent-hover: var(--primary-hover);
  --color-accent-subtle: var(--primary-subtle);
  --color-positive: var(--success);
  --color-positive-bg: var(--success-bg);
  --color-negative: var(--danger);
  --color-negative-bg: var(--danger-bg);
  --color-warning: var(--warning);
  --color-warning-bg: var(--warning-bg);
  --color-bg-primary: var(--surface);
  --color-bg-secondary: var(--bg);
  --color-bg-tertiary: var(--bg-subtle);
  --color-surface-card: var(--surface);
  --color-surface-sidebar: var(--surface-sidebar);
  --color-surface-header: var(--surface-header);
  --color-surface-modal: var(--surface-elevated);
  --color-surface-drawer: var(--surface-elevated);
  --color-surface-dropdown: var(--surface-elevated);
  --color-label-primary: var(--text-primary);
  --color-label-secondary: var(--text-secondary);
  --color-label-tertiary: var(--text-muted);
  --color-separator: var(--border);
  --color-separator-opaque: var(--border);
  --font-primary: var(--font-sans);
}

/* ── Professional Dark Mode ── */
[data-theme="dark"] {
  --bg: #090d16;
  --bg-subtle: #111827;
  --surface: #0f172a;
  --surface-muted: #1e293b;
  --surface-elevated: #1e293b;
  --surface-sidebar: #0b1120;
  --surface-header: #0f172a;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border: #1e293b;
  --border-subtle: #192231;
  --border-strong: #334155;

  --primary: #38bdf8;
  --primary-hover: #7dd3fc;
  --primary-active: #0284c7;
  --primary-subtle: rgba(56, 189, 248, 0.12);
  --primary-border: rgba(56, 189, 248, 0.35);

  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.3);

  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.3);

  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --warning-border: rgba(251, 191, 36, 0.3);

  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);
  --info-border: rgba(56, 189, 248, 0.3);

  --neutral-badge: #94a3b8;
  --neutral-badge-bg: #1e293b;
  --neutral-badge-border: #334155;

  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-drawer: -4px 0 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}