/**
 * DISPOX Design Tokens - Single Source of Truth
 *
 * Location: _meta/shared/css/dispox-tokens.css
 * Version: 2.0.0 (aligned with dispox legacy extraction)
 *
 * Usage:
 *   @import url('path/to/_meta/shared/css/dispox-tokens.css');
 *   OR copy to project: cp _meta/shared/css/dispox-tokens.css ./src/css/
 *
 * Projects using this:
 *   - Hordain-proto
 *   - Symetri-proto
 *   - brainflow-sandbox
 *   - MC-proto
 */

:root {
    /* ============================================
       COLORS - Brand Palette (from DispoX legacy)
       ============================================ */

    /* Base surfaces */
    --dx-bg: #F4F7F8;              /* Page background */
    --dx-surface: #FAFFFF;         /* Cards, panels */
    --dx-surface-bright: #FFFFFF;  /* Highlighted areas */
    --dx-surface-dim: #EEEEEE;     /* Subtle backgrounds */
    --dx-border: #dee2e6;          /* Borders, dividers */

    /* Text colors */
    --dx-text: #1E0202;            /* Primary text (NOT pure black) */
    --dx-text-muted: #6c757d;      /* Secondary text */
    --dx-text-light: #9ca3af;      /* Tertiary/disabled */

    /* Brand accent (teal/blue spectrum) */
    --dx-accent: #4797AC;          /* Steel blue - primary accent */
    --dx-accent-hover: #326F83;    /* Paradiso - hover state */
    --dx-accent-dark: #074A59;     /* Deep sea - dark variant */
    --dx-accent-darker: #1D3D4A;   /* Blue dianne - darkest */
    --dx-cornflower: #7FB5E1;      /* Light blue - highlights */

    /* Status colors */
    --dx-success: #4CAF50;         /* Green - good/high performance */
    --dx-warning: #FF9800;         /* Orange - medium/caution */
    --dx-error: #CC0000;           /* Red - low/critical */
    --dx-info: #7FB5E1;            /* Blue - neutral info */

    /* Performance thresholds (graph nodes) */
    --dx-perf-high: var(--dx-success);     /* > 90% */
    --dx-perf-medium: var(--dx-warning);   /* 50-90% */
    --dx-perf-low: var(--dx-error);        /* < 50% */

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Font stacks */
    --dx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dx-font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;

    /* Font sizes (rem based, 1rem = 16px) */
    --dx-text-xs: 0.75rem;         /* 12px - badges, labels */
    --dx-text-sm: 0.875rem;        /* 14px - body, tables */
    --dx-text-base: 1rem;          /* 16px - standard */
    --dx-text-lg: 1.125rem;        /* 18px - section titles */
    --dx-text-xl: 1.25rem;         /* 20px - page titles */
    --dx-text-2xl: 1.5rem;         /* 24px - headings */
    --dx-text-3xl: 2rem;           /* 32px - hero */

    /* Font weights */
    --dx-font-normal: 400;
    --dx-font-medium: 500;
    --dx-font-semibold: 600;
    --dx-font-bold: 700;

    /* Line heights */
    --dx-leading-tight: 1.25;
    --dx-leading-normal: 1.5;
    --dx-leading-relaxed: 1.75;

    /* ============================================
       SPACING (4px base unit)
       ============================================ */

    --dx-space-1: 0.25rem;         /* 4px */
    --dx-space-2: 0.5rem;          /* 8px */
    --dx-space-3: 0.75rem;         /* 12px */
    --dx-space-4: 1rem;            /* 16px */
    --dx-space-5: 1.25rem;         /* 20px */
    --dx-space-6: 1.5rem;          /* 24px */
    --dx-space-8: 2rem;            /* 32px */
    --dx-space-10: 2.5rem;         /* 40px */
    --dx-space-12: 3rem;           /* 48px */
    --dx-space-16: 4rem;           /* 64px */

    /* Semantic spacing aliases */
    --dx-space-xs: var(--dx-space-1);
    --dx-space-sm: var(--dx-space-2);
    --dx-space-md: var(--dx-space-4);
    --dx-space-lg: var(--dx-space-6);
    --dx-space-xl: var(--dx-space-8);

    /* ============================================
       BORDERS & RADIUS
       ============================================ */

    --dx-radius-sm: 4px;           /* Buttons, inputs, badges */
    --dx-radius-md: 8px;           /* Cards, panels */
    --dx-radius-lg: 12px;          /* Modals, large containers */
    --dx-radius-xl: 16px;          /* Hero sections */
    --dx-radius-full: 9999px;      /* Pills, avatars */

    --dx-border-width: 1px;
    --dx-border-color: var(--dx-border);

    /* ============================================
       SHADOWS
       ============================================ */

    --dx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dx-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --dx-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --dx-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Elevation shadows (cards) */
    --dx-elevation-1: var(--dx-shadow-sm);
    --dx-elevation-2: var(--dx-shadow-md);
    --dx-elevation-3: var(--dx-shadow-lg);

    /* ============================================
       TRANSITIONS
       ============================================ */

    --dx-transition-fast: 150ms ease;
    --dx-transition-base: 200ms ease;
    --dx-transition-slow: 300ms ease;

    /* ============================================
       Z-INDEX LAYERS
       ============================================ */

    --dx-z-base: 1;
    --dx-z-dropdown: 100;
    --dx-z-sticky: 200;
    --dx-z-overlay: 500;
    --dx-z-modal: 1000;
    --dx-z-tooltip: 2000;

    /* ============================================
       LAYOUT - Shell dimensions
       ============================================ */

    --dx-shell-header-height: 56px;
    --dx-shell-sidebar-width: 64px;
    --dx-shell-sidebar-expanded: 240px;

    /* ============================================
       GRAPH - Node styling
       ============================================ */

    --dx-node-width: 180px;
    --dx-node-height: 80px;
    --dx-node-radius: 8px;
    --dx-node-stroke: var(--dx-accent);
    --dx-node-stroke-width: 1px;
    --dx-node-stroke-selected: 3px;

    --dx-edge-stroke: var(--dx-accent-hover);
    --dx-edge-width: 2px;
    --dx-edge-opacity: 0.6;
}

/* ============================================
   BASE RESET
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;  /* 16px base */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--dx-font-sans);
    font-size: var(--dx-text-base);
    line-height: var(--dx-leading-normal);
    color: var(--dx-text);
    background: var(--dx-bg);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text colors */
.dx-text-primary { color: var(--dx-text); }
.dx-text-muted { color: var(--dx-text-muted); }
.dx-text-accent { color: var(--dx-accent); }
.dx-text-success { color: var(--dx-success); }
.dx-text-warning { color: var(--dx-warning); }
.dx-text-error { color: var(--dx-error); }

/* Background colors */
.dx-bg-surface { background: var(--dx-surface); }
.dx-bg-accent { background: var(--dx-accent); }
.dx-bg-success { background: var(--dx-success); }
.dx-bg-warning { background: var(--dx-warning); }
.dx-bg-error { background: var(--dx-error); }

/* Shadows */
.dx-shadow-sm { box-shadow: var(--dx-shadow-sm); }
.dx-shadow-md { box-shadow: var(--dx-shadow-md); }
.dx-shadow-lg { box-shadow: var(--dx-shadow-lg); }

/* Border radius */
.dx-rounded-sm { border-radius: var(--dx-radius-sm); }
.dx-rounded-md { border-radius: var(--dx-radius-md); }
.dx-rounded-lg { border-radius: var(--dx-radius-lg); }
.dx-rounded-full { border-radius: var(--dx-radius-full); }