/* Root color variables for RETEC theme */
:root {
    /* Primary */
    --bg: #000000;
    --white: #ffffff;
    
    /* Dark Mode */
    --text: #e8e0d8;
    --muted: #8a847c;
    --muted-2: #6b6b6b;
    --muted-3: #6a645c;
    --muted-4: #d3ccc2;
    --accent: #3a3630;
    --bg-rgb: 0,0,0;
    --text-rgb: 232,224,216;
    --white-rgb: 255,255,255;
    
    /* Light Mode */
    --light-text: #1a1a1a;
    --light-text-secondary: #181818;
    --light-text-tertiary: #333;
    --light-text-muted: #444;
    --light-text-muted-light: #555;
    --light-text-muted-lighter: #666;
    --light-text-muted-lightest: #999;
    --light-text-hint: #ccc;
    --light-text-placeholder: #111;
    --light-bg: #f5f5f5;
    --light-border: #e0e0e0;
    --card-border: #e9e9e9;
    
    /* Dark Mode Variants */
    --dark-1: #0e0e0e;
    --dark-2: #0a0a0a;
    --border-dark: #1a1815;
    --work-border: #181612;
    --accent-dark: #272727;
    --footer-muted: #5a544c;
    --gray-light: #e6e6e6;
    --border-very-dark: #141210;
    
    /* Utility */
    --shadow-color: rgba(30,30,30,0.06);

    /* Font Families */
    --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'MADE Mirage';

    /* Additional Colors */
    --card-bg-light: #fafafa;
    --text-light: #888;
    --text-muted-medium: #7a746c;
    --bg-code: #f0f0f0;
    --error-color: #c62828;
    --border-subtle: #2a2a2a;
    --gray-medium: #81dba2;
    --gray-subtle: #ded9d1;
    --bg-very-dark: #151515;
    --accent-hover: #051801a4;
    --border-light: #e8e8e8;
    --color-warning-light: #f4d28e;
    --color-warning: #c99445;
    --color-warning-lighter: #f0d59d;
    --color-success-dark: #1d5d51;
    --text-secondary-dark: #62605b;
    --bg-paper-light: #f7f3ed;

    /* ===== Motion tokens (single source of truth for the RETEC motion system) =====
       Mirrored in static/js/motion/core.js (api.ease / api.duration / api.stagger)
       so CSS transitions and GSAP timelines share one vocabulary. */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-smooth: cubic-bezier(.33, 1, .68, 1);
    --ease-expressive: cubic-bezier(.16, 1, .3, 1);
    --ease-curtain: cubic-bezier(.76, 0, .24, 1);

    --duration-fast: 220ms;
    --duration-medium: 520ms;
    --duration-slow: 900ms;

    --motion-stagger-sm: 60ms;
    --motion-stagger: 100ms;
    --motion-stagger-lg: 140ms;

    /* Reveal travel distances (kept small on purpose — 80% calm) */
    --motion-travel: 18px;
    --motion-travel-sm: 8px;
    --motion-header-offset: 96px;
}