/* ==========================================================================
   CSS Custom Properties - OpenClow Dark Theme Design System
   ========================================================================== */

:root {
    /* Background Colors */
    --bg-primary:       #0d1117;
    --bg-secondary:     #161b22;
    --bg-tertiary:      #1c2333;
    --bg-card:          #1c2128;
    --bg-card-hover:    #22272e;
    --bg-code:          #0d1117;
    --bg-code-inline:   #1f2937;
    --bg-input:         #0d1117;
    --bg-overlay:       rgba(0, 0, 0, 0.6);

    /* Text Colors */
    --text-primary:     #e6edf3;
    --text-secondary:   #8b949e;
    --text-muted:       #6e7681;
    --text-link:        #58a6ff;
    --text-link-hover:  #79c0ff;
    --text-inverse:     #0d1117;

    /* Accent Colors */
    --accent-blue:      #1f6feb;
    --accent-blue-dim:  #1158c7;
    --accent-green:     #3fb950;
    --accent-green-dim: #238636;
    --accent-orange:    #d29922;
    --accent-red:       #f85149;
    --accent-red-dim:   #da3633;
    --accent-purple:    #bc8cff;
    --accent-cyan:      #39d353;
    --accent-teal:      #2ea98f;

    /* Category Colors */
    --cat-error:        #f85149;
    --cat-prompt:       #bc8cff;
    --cat-guide:        #58a6ff;
    --cat-news:         #3fb950;

    /* Difficulty Colors */
    --diff-beginner:    #3fb950;
    --diff-intermediate:#d29922;
    --diff-advanced:    #f85149;

    /* Border Colors */
    --border-default:   #30363d;
    --border-muted:     #21262d;
    --border-active:    #58a6ff;

    /* Typography */
    --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-heading:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes */
    --fs-xs:            0.75rem;    /* 12px */
    --fs-sm:            0.8125rem;  /* 13px */
    --fs-base:          0.9375rem;  /* 15px */
    --fs-md:            1rem;       /* 16px */
    --fs-lg:            1.125rem;   /* 18px */
    --fs-xl:            1.25rem;    /* 20px */
    --fs-2xl:           1.5rem;     /* 24px */
    --fs-3xl:           1.875rem;   /* 30px */
    --fs-4xl:           2.25rem;    /* 36px */

    /* Font Weights */
    --fw-normal:        400;
    --fw-medium:        500;
    --fw-semibold:      600;
    --fw-bold:          700;

    /* Line Heights */
    --lh-tight:         1.25;
    --lh-normal:        1.6;
    --lh-relaxed:       1.75;
    --lh-code:          1.7;

    /* Spacing */
    --sp-1:             0.25rem;
    --sp-2:             0.5rem;
    --sp-3:             0.75rem;
    --sp-4:             1rem;
    --sp-5:             1.25rem;
    --sp-6:             1.5rem;
    --sp-8:             2rem;
    --sp-10:            2.5rem;
    --sp-12:            3rem;
    --sp-16:            4rem;

    /* Layout */
    --content-max:      780px;
    --page-max:         1200px;
    --sidebar-width:    280px;
    --header-height:    64px;
    --grid-gap:         1.5rem;

    /* Border Radius */
    --radius-sm:        4px;
    --radius-md:        6px;
    --radius-lg:        8px;
    --radius-xl:        12px;
    --radius-full:      9999px;

    /* Shadows */
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:        0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg:        0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-card-hover:0 4px 12px rgba(0, 0, 0, 0.4);

    /* Transitions */
    --transition-fast:  150ms ease;
    --transition-base:  200ms ease;
    --transition-slow:  300ms ease;

    /* Z-Index Scale */
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-header:         300;
    --z-overlay:        400;
    --z-modal:          500;

    /* Code Block */
    --code-radius:      var(--radius-lg);
    --code-padding:     1.25rem;
}