/**
 * FINIA Design System — Tokens
 * By Devssoft · dark · glass · gradient (cyan → blue → violet)
 * Alineado con finia-ui.css (landing). Source of truth de la app.
 */

:root {
    /* Background */
    --cb-bg-base: #06070b;
    --cb-bg-surface: #0e111a;
    --cb-bg-elevated: #161a26;

    /* Border */
    --cb-border: rgba(255, 255, 255, 0.08);
    --cb-border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --cb-text-primary: #f4f6fb;
    --cb-text-secondary: #b6bdcc;
    --cb-text-tertiary: #828a9c;

    /* Accent (FINIA blue) */
    --cb-accent: #3b82f6;
    --cb-accent-hover: #2f6fe0;
    --cb-accent-muted: rgba(59, 130, 246, 0.14);
    --cb-accent-border: rgba(99, 102, 241, 0.35);

    /* Brand gradient */
    --cb-grad: linear-gradient(120deg, #22d3ee 0%, #3b82f6 45%, #8b5cf6 100%);
    --cb-grad-soft: linear-gradient(120deg, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.18));

    /* Brand hues */
    --cb-cyan: #22d3ee;
    --cb-blue: #3b82f6;
    --cb-violet: #8b5cf6;

    /* Semantic */
    --cb-success: #22d3ee;
    --cb-success-muted: rgba(34, 211, 238, 0.14);
    --cb-warning: #f5b14c;
    --cb-warning-muted: rgba(245, 177, 76, 0.14);
    --cb-danger: #f87171;
    --cb-danger-muted: rgba(248, 113, 113, 0.14);
    --cb-loading-skeleton: rgba(255, 255, 255, 0.06);

    /* Typography scale */
    --cb-text-xs: 12px;
    --cb-text-sm: 13px;
    --cb-text-base: 15px;
    --cb-text-lg: 18px;
    --cb-text-xl: 24px;
    --cb-text-2xl: 32px;

    --cb-font-normal: 400;
    --cb-font-medium: 500;
    --cb-font-semibold: 600;
    --cb-font-bold: 700;

    --cb-leading-tight: 1.25;
    --cb-leading-normal: 1.5;
    --cb-leading-relaxed: 1.625;

    /* Spacing (8pt grid) */
    --cb-space-1: 4px;
    --cb-space-2: 8px;
    --cb-space-3: 12px;
    --cb-space-4: 16px;
    --cb-space-5: 24px;
    --cb-space-6: 32px;
    --cb-space-7: 48px;
    --cb-space-8: 64px;

    /* Radius (premium, redondeado) */
    --cb-radius-sm: 8px;
    --cb-radius-md: 10px;
    --cb-radius-lg: 16px;
    --cb-radius-full: 9999px;

    /* Shadow */
    --cb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cb-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
    --cb-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
    --cb-glow: 0 10px 34px -10px rgba(59, 130, 246, 0.6);

    /* Focus */
    --cb-focus-ring: 0 0 0 2px var(--cb-bg-base), 0 0 0 4px var(--cb-accent);

    /* Layout */
    --cb-max-width-sm: 720px;
    --cb-max-width-md: 1100px;
    --cb-max-width-lg: 1280px;
    --cb-max-width-xl: 1440px;

    /* Breakpoints (reference) — mobile shell uses max-width: 1023px */
    --cb-bp-tablet: 768px;
    --cb-bp-desktop: 1024px;
    --cb-bp-mobile-nav: 1024px;
    --cb-bp-wide: 1280px;
    --cb-bp-ultra: 1440px;

    /* Legacy aliases (compat) */
    --cb-bg: var(--cb-bg-base);
    --cb-surface: var(--cb-bg-surface);
    --cb-text: var(--cb-text-primary);
    --cb-muted: var(--cb-text-secondary);
}