@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* === CANVAS (the background the panels float on) === */
    --canvas:           #D8DCE4;
    --canvas-gap:       10px;   /* gap between panels and from edges */

    /* === PANEL / CARD === */
    --panel-bg:         #FFFFFF;
    --panel-radius:     16px;
    --panel-shadow:     0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --panel-shadow-hover: 0 6px 20px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
    --panel-border:     1px solid rgba(0,0,0,0.06);

    /* === COLORS === */
    --text-primary:     #1C2533;
    --text-secondary:   #5A6777;
    --text-muted:       #8E99A8;
    --text-label:       #7A8898;

    --accent:           #1A6FD4;     /* TWA blue */
    --accent-light:     #EBF3FF;
    --accent-hover:     rgba(26, 111, 212, 0.10);

    --success:          #10B981;
    --success-light:    #ECFDF5;
    --warning:          #F59E0B;
    --warning-light:    #FFFBEB;
    --danger:           #EF4444;
    --danger-light:     #FEF2F2;

    --border:           #E8EAED;
    --border-dark:      #D1D5DB;
    --divider:          rgba(0,0,0,0.06);

    /* === TYPOGRAPHY === */
    --font-sans:        'Figtree', 'Segoe UI', system-ui, sans-serif;
    --font-mono:        'JetBrains Mono', monospace;

    --text-xs:          11px;
    --text-sm:          13px;
    --text-base:        15px;
    --text-md:          16px;
    --text-lg:          18px;

    --weight-light:     300;
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semi:      600;
    --weight-bold:      700;

    /* === SPACING === */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;

    /* === LAYOUT === */
    --sidebar-width:      240px;
    --sidebar-collapsed:   68px;
    --toolbar-height:      52px;

    /* === RADIUS === */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    18px;
    --radius-full:  9999px;

    /* === TRANSITIONS === */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-snap:    cubic-bezier(0.65, 0.05, 0.36, 1);
    --dur-fast:     140ms;
    --dur-base:     240ms;
    --dur-slow:     360ms;

    /* Legacy aliases (keep JS components working) */
    --font-family: var(--font-sans);
    --font-size-body: var(--text-sm);
    --color-accent-primary: var(--accent);
    --color-border: var(--border);
    --width-sidebar: var(--sidebar-width);
    --height-top-toolbar: var(--toolbar-height);
    --border-radius-small: var(--radius-sm);
    --border-radius-medium: var(--radius-md);
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --icon-size: 18px;
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-bg-panel: var(--panel-bg);
    --color-bg-canvas: var(--canvas);
    --color-accent-hover: var(--accent-hover);
}