/* ============================================================
   CCL|250 Capital — Design Tokens
   Version: 1.0.0
   Inspired by Apple Human Interface Guidelines
   Philosophy: Content is the interface. Dark mode first.
   ============================================================ */

:root {
    /* ──────────────────────────────────────────────
       NEUTRALS (light mode defaults)
       ────────────────────────────────────────────── */
    --bg-primary:       #FFFFFF;  /* main canvas */
    --bg-secondary:     #F5F5F7;  /* cards, sections */
    --bg-tertiary:      #FAFAFA;  /* inputs, hover states */
    --bg-elevated:      #FFFFFF;  /* modals, popovers */

    --text-primary:     #1D1D1F;  /* main content */
    --text-secondary:   #6E6E73;  /* metadata, labels */
    --text-tertiary:    #86868B;  /* timestamps, hints */
    --text-inverse:     #FFFFFF;  /* on dark backgrounds */

    --separator:        #D2D2D7;  /* divider lines */
    --separator-opaque: #E5E5EA;  /* stronger dividers */

    /* ──────────────────────────────────────────────
       SEMANTIC COLORS — meaning only, never decoration
       ────────────────────────────────────────────── */
    --success:          #30D158;  /* profit, positive, pass */
    --success-subtle:   rgba(48, 209, 88, 0.12);
    --success-border:   rgba(48, 209, 88, 0.3);

    --danger:           #FF3B30;  /* loss, stop hit, fail */
    --danger-subtle:    rgba(255, 59, 48, 0.12);
    --danger-border:    rgba(255, 59, 48, 0.3);

    --warning:          #FF9F0A;  /* caution, semáforo 2/5, earnings proximal */
    --warning-subtle:   rgba(255, 159, 10, 0.12);
    --warning-border:   rgba(255, 159, 10, 0.3);

    --info:             #0A84FF;  /* action, link, primary button */
    --info-subtle:      rgba(10, 132, 255, 0.12);
    --info-border:      rgba(10, 132, 255, 0.3);

    /* ──────────────────────────────────────────────
       TYPOGRAPHY
       ────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Monaco",
                 Consolas, "Courier New", monospace;

    /* Type scale (Apple HIG-inspired) */
    --text-hero:        56px;  /* Net Liq main number */
    --text-title-1:     34px;  /* Section titles */
    --text-title-2:     28px;  /* Subsection */
    --text-title-3:     22px;  /* Card titles */
    --text-headline:    17px;  /* Ticker names, row headers */
    --text-body:        17px;  /* Main content */
    --text-callout:     16px;  /* Secondary info */
    --text-footnote:    13px;  /* Timestamps, metadata */
    --text-caption:     11px;  /* Badges, chips */

    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    --leading-tight:    1.2;
    --leading-snug:     1.35;
    --leading-normal:   1.5;
    --leading-loose:    1.7;

    --tracking-tight:   -0.02em;  /* Hero numbers */
    --tracking-normal:  0;
    --tracking-wide:    0.02em;   /* Uppercase labels */

    /* ──────────────────────────────────────────────
       SPACING — 8pt grid (multiples of 4)
       ────────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ──────────────────────────────────────────────
       RADIUS
       ────────────────────────────────────────────── */
    --radius-sm:    6px;   /* chips, badges, small inputs */
    --radius-md:   10px;   /* buttons, larger inputs */
    --radius-lg:   14px;   /* cards */
    --radius-xl:   20px;   /* modals, large containers */
    --radius-full: 999px;  /* pills, avatars */

    /* ──────────────────────────────────────────────
       SHADOWS (subtle, Apple doesn't abuse)
       ────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ──────────────────────────────────────────────
       MOTION
       ────────────────────────────────────────────── */
    --ease-smooth:   cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ──────────────────────────────────────────────
       Z-INDEX scale
       ────────────────────────────────────────────── */
    --z-base:     0;
    --z-elevated: 10;
    --z-sticky:   100;
    --z-dropdown: 1000;
    --z-modal:    10000;
    --z-toast:    100000;
}

/* ==============================================================
   DARK MODE (default for CCL|250 dashboard)

   Applied via .dark class on <html> or via prefers-color-scheme.
   The Flask template will set .dark class by default, with a
   toggle to override. See references/dark-mode-strategy.md
   ============================================================== */

.dark,
html[data-theme="dark"] {
    --bg-primary:       #000000;
    --bg-secondary:     #1C1C1E;
    --bg-tertiary:      #2C2C2E;
    --bg-elevated:      #1C1C1E;

    --text-primary:     #F5F5F7;
    --text-secondary:   #AEAEB2;
    --text-tertiary:    #8E8E93;
    --text-inverse:     #000000;

    --separator:        #38383A;
    --separator-opaque: #48484A;

    /* Semantic colors slightly brighter in dark mode */
    --success:          #32D74B;
    --success-subtle:   rgba(50, 215, 75, 0.18);
    --success-border:   rgba(50, 215, 75, 0.35);

    --danger:           #FF453A;
    --danger-subtle:    rgba(255, 69, 58, 0.18);
    --danger-border:    rgba(255, 69, 58, 0.35);

    --warning:          #FF9F0A;
    --warning-subtle:   rgba(255, 159, 10, 0.18);
    --warning-border:   rgba(255, 159, 10, 0.35);

    --info:             #0A84FF;
    --info-subtle:      rgba(10, 132, 255, 0.18);
    --info-border:      rgba(10, 132, 255, 0.35);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Respect system preference if no explicit class set */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg-primary:       #000000;
        --bg-secondary:     #1C1C1E;
        --bg-tertiary:      #2C2C2E;
        --bg-elevated:      #1C1C1E;
        --text-primary:     #F5F5F7;
        --text-secondary:   #AEAEB2;
        --text-tertiary:    #8E8E93;
        --separator:        #38383A;
        --success:          #32D74B;
        --danger:           #FF453A;
    }
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================================
   GLOBAL DEFAULTS — apply to every page using this system
   ============================================================== */

html {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    padding: 0;
}

/* Any element that shows numeric data — opt in explicitly */
.tabular,
.price,
.pnl,
.percentage,
.net-liq,
.strike,
.quantity {
    font-variant-numeric: tabular-nums;
}