/* CCL|250 Capital — design tokens.
 * Source of truth for color, spacing, typography, motion.
 * Extend this file; don't hardcode values in component CSS.
 * See skills/ccl250-design-system for usage rules.
 */

:root {
    color-scheme: dark light;

    /* ── Surfaces (dark theme defaults) ──────────────────────────── */
    --bg-primary:    #0a0a0a;
    --bg-secondary:  #141414;
    --bg-tertiary:   #1c1c1c;
    --surface-card:  #1a1a1a;
    --surface-raised: #242424;

    /* ── Text ────────────────────────────────────────────────────── */
    --text-primary:   #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-tertiary:  #707070;
    --text-muted:     #4d4d4d;

    /* ── Borders ─────────────────────────────────────────────────── */
    --border-subtle: #262626;
    --border-strong: #3a3a3a;
    --separator:     #262626;

    /* ── Semantic colors ─────────────────────────────────────────── */
    --success:         #00d4aa;
    --success-subtle:  rgba(0, 212, 170, 0.12);
    --danger:          #ff4757;
    --danger-subtle:   rgba(255, 71, 87, 0.10);
    --warning:         #ffa726;
    --warning-subtle:  rgba(255, 167, 38, 0.10);
    --info:            #4dabf7;
    --info-subtle:     rgba(77, 171, 247, 0.12);

    /* Legacy aliases — kept so earlier templates don't break.
       Prefer the semantic names above in new code. */
    --accent-teal:    var(--success);
    --accent-amber:   var(--warning);
    --accent-crimson: var(--danger);
    --color-positive: var(--success);
    --color-negative: var(--danger);
    --color-warning:  var(--warning);
    --color-info:     var(--info);

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

    /* Apple-style type scale (semantic names, not size-keyed) */
    --text-hero:      3.5rem;     /* 56px — Net Liq */
    --text-title-1:   2.125rem;   /* 34px — Page titles */
    --text-title-2:   1.75rem;    /* 28px — Section titles */
    --text-title-3:   1.375rem;   /* 22px — Card titles */
    --text-headline:  1.0625rem;  /* 17px — Emphasized body */
    --text-body:      1rem;       /* 16px — Default body */
    --text-callout:   0.9375rem;  /* 15px — Labels, button text */
    --text-subhead:   0.875rem;   /* 14px — Secondary labels */
    --text-footnote:  0.8125rem;  /* 13px — Meta info */
    --text-caption:   0.75rem;    /* 12px — Timestamps, tags */

    /* Legacy size-keyed tokens — keep for existing templates */
    --text-xs:   var(--text-caption);
    --text-sm:   var(--text-subhead);
    --text-base: var(--text-body);
    --text-lg:   var(--text-headline);
    --text-xl:   var(--text-title-3);
    --text-2xl:  var(--text-title-2);
    --text-3xl:  var(--text-title-1);
    --text-4xl:  var(--text-hero);

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

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.06em;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

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

    /* ── Radius ──────────────────────────────────────────────────── */
    --radius-sm:   0.375rem;
    --radius-md:   0.625rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);

    /* ── Motion ──────────────────────────────────────────────────── */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ── Z-index ─────────────────────────────────────────────────── */
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-drawer:    40;
    --z-modal:     50;
    --z-toast:     60;
}

[data-theme="light"] {
    --bg-primary:    #ffffff;
    --bg-secondary:  #f5f5f7;
    --bg-tertiary:   #ebebed;
    --surface-card:  #ffffff;
    --surface-raised: #ffffff;

    --text-primary:   #1c1c1e;
    --text-secondary: #636366;
    --text-tertiary:  #8e8e93;
    --text-muted:     #c7c7cc;

    --border-subtle: #e5e5e5;
    --border-strong: #d1d1d6;
    --separator:     #e5e5e5;

    --success-subtle:  rgba(0, 160, 128, 0.08);
    --danger-subtle:   rgba(220, 38, 48, 0.08);
    --warning-subtle:  rgba(200, 130, 0, 0.08);
    --info-subtle:     rgba(0, 122, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}