/* =====================================================
   CLAUX - DESIGN TOKENS
   ===================================================== */

:root {
    /* Background layers */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;

    /* Text hierarchy */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;

    /* Brand accent - Material Blue */
    --accent: #2196f3;
    --accent-dark: #1976d2;
    --accent-light: #42a5f5;
    --accent-dim: rgba(33, 150, 243, 0.12);

    /* Border tokens */
    --border: #2d2d2d;
    --border-light: #3a3a3a;

    /* Surface tokens */
    --card-bg: #1e1e1e;
    --sidebar-bg: #1e1e1e;
    --sidebar-w: 260px;

    /* Semantic status colors */
    --success: #4caf50;
    --success-dim: rgba(76, 175, 80, 0.12);
    --warning: #ff9800;
    --warning-dim: rgba(255, 152, 0, 0.12);
    --danger: #f44336;
    --danger-dim: rgba(244, 67, 54, 0.12);


    /* Border radius scale */
    --radius: 4px;
    --radius-sm: 2px;
    --radius-lg: 8px;

    /* Material elevation shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);

    /* Global transition */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}