/* Future Node V2 — Design Tokens
   Single source of truth for brand, theme, spacing, radii, shadows and layering.
*/

:root {
    color-scheme: dark;

    /* Brand */
    --fn-purple: #951B81;
    --fn-blue: #1D71B8;
    --fn-electric-blue: #3B82F6;
    --fn-cyan: #22D3EE;
    --fn-accent-purple: #8B5CF6;
    --fn-green: #10B981;

    --fn-gradient: linear-gradient(135deg, var(--fn-purple), var(--fn-blue));

    /* Dark theme */
    --fn-bg: #0A0A0F;
    --fn-bg-elevated: #12121A;
    --fn-surface: rgba(255, 255, 255, 0.035);
    --fn-surface-strong: rgba(255, 255, 255, 0.055);
    --fn-surface-soft: rgba(255, 255, 255, 0.02);

    --fn-text: #EAEAF0;
    --fn-text-soft: #C9C9D3;
    --fn-text-muted: #AAAAB5;
    --fn-text-faint: #777783;

    --fn-border: rgba(255, 255, 255, 0.06);
    --fn-border-strong: rgba(255, 255, 255, 0.10);
    --fn-focus: rgba(29, 113, 184, 0.78);

    --fn-success: #86EFAC;
    --fn-success-bg: rgba(34, 197, 94, 0.12);
    --fn-success-border: rgba(34, 197, 94, 0.30);

    --fn-danger: #FCA5A5;
    --fn-danger-bg: rgba(239, 68, 68, 0.12);
    --fn-danger-border: rgba(239, 68, 68, 0.30);

    /* Typography */
    --fn-font: "Inter", "Segoe UI", Arial, sans-serif;

    /* Layout */
    --fn-container: 1200px;
    --fn-page-gutter: 80px;
    --fn-page-gutter-tablet: 32px;
    --fn-page-gutter-mobile: 20px;
    --fn-nav-height: 100px;

    /* Spacing */
    --fn-space-1: 4px;
    --fn-space-2: 8px;
    --fn-space-3: 12px;
    --fn-space-4: 16px;
    --fn-space-5: 20px;
    --fn-space-6: 24px;
    --fn-space-7: 30px;
    --fn-space-8: 40px;
    --fn-space-9: 60px;
    --fn-space-10: 80px;

    /* Radius */
    --fn-radius-sm: 10px;
    --fn-radius-md: 16px;
    --fn-radius-lg: 22px;
    --fn-radius-xl: 26px;
    --fn-radius-round: 999px;

    /* Blur / shadow */
    --fn-blur: 22px;
    --fn-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
    --fn-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.55);
    --fn-glow-blue: 0 0 30px rgba(29, 113, 184, 0.28);

    /* Motion */
    --fn-ease: cubic-bezier(.2, .8, .2, 1);
    --fn-fast: 180ms;
    --fn-normal: 320ms;
    --fn-slow: 700ms;

    /* Layering */
    --fn-z-nav: 1000;
    --fn-z-float: 10000;
    --fn-z-panel: 10001;
    --fn-z-modal: 20000;
}

html[data-theme="light"] {
    color-scheme: light;

    --fn-bg: #F7F8FC;
    --fn-bg-elevated: #FFFFFF;
    --fn-surface: rgba(255, 255, 255, 0.76);
    --fn-surface-strong: rgba(255, 255, 255, 0.92);
    --fn-surface-soft: rgba(18, 18, 26, 0.035);

    --fn-text: #171721;
    --fn-text-soft: #343441;
    --fn-text-muted: #626270;
    --fn-text-faint: #838390;

    --fn-border: rgba(18, 18, 26, 0.08);
    --fn-border-strong: rgba(18, 18, 26, 0.14);

    --fn-shadow-soft: 0 18px 50px rgba(30, 35, 55, 0.10);
    --fn-shadow-strong: 0 30px 80px rgba(30, 35, 55, 0.16);
}