/* ═══════════════════════════════════════════════════════════════
   Coldnews Design System — CSS Custom Properties (Light Theme)
   Accent: Weblabs Green  |  Backgrounds: Clean White/Light
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Weblabs Brand Colors ── */
    --cn-accent:          #062926;
    --cn-accent-hover:    #0a3d38;
    --cn-accent-glow:     rgba(6, 41, 38, 0.12);
    --cn-accent-subtle:   rgba(6, 41, 38, 0.06);
    --cn-accent-light:    rgba(6, 41, 38, 0.08);
    --cn-primary:         #062926;

    /* ── Backgrounds (Light) ── */
    --cn-bg-primary:      #ffffff;
    --cn-bg-secondary:    #f8f9fb;
    --cn-bg-tertiary:     #f1f3f5;
    --cn-bg-card:         #ffffff;
    --cn-bg-card-hover:   #f8f9fb;
    --cn-bg-glass:        rgba(0, 0, 0, 0.01);
    --cn-bg-input:        #f5f6f8;

    /* ── State Colors ── */
    --cn-success:         #16a34a;
    --cn-success-light:   #f0fdf4;
    --cn-warning:         #d97706;
    --cn-warning-light:   #fffbeb;
    --cn-danger:          #dc2626;
    --cn-danger-light:    #fef2f2;
    --cn-info:            #2563eb;

    /* ── Typography ── */
    --cn-text-primary:    #111827;
    --cn-text-secondary:  #4b5563;
    --cn-text-muted:      #9ca3af;

    /* ── Borders ── */
    --cn-border:          #e5e7eb;
    --cn-border-hover:    #d1d5db;
    --cn-border-accent:   rgba(6, 41, 38, 0.22);

    /* ── Font ── */
    --cn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cn-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing ── */
    --cn-space-xs: 4px;
    --cn-space-sm: 8px;
    --cn-space-md: 16px;
    --cn-space-lg: 24px;
    --cn-space-xl: 32px;
    --cn-space-2xl: 48px;

    /* ── Radii ── */
    --cn-radius-sm: 8px;
    --cn-radius-md: 12px;
    --cn-radius-lg: 16px;
    --cn-radius-xl: 20px;
    --cn-radius-full: 9999px;

    /* ── Shadows ── */
    --cn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --cn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --cn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --cn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --cn-shadow-glow: 0 0 0 3px var(--cn-accent-glow);

    /* ── Transitions ── */
    --cn-transition-fast: 150ms ease;
    --cn-transition-base: 250ms ease;
    --cn-transition-slow: 400ms ease;

    /* ── Layout ── */
    --cn-sidebar-width: 240px;
    --cn-header-height: 56px;
}