/* ============================================
   Theme Variables - Single Source of Truth
   All color values for the SuriDevs website.
   ============================================ */

:root {
    /* ---- Brand Colors ---- */
    --color-primary: #1b73d8;
    --color-primary-light: #d1e3f7;
    --color-primary-hover: #1C71D8;
    --color-secondary: #e74c3c;
    --color-tertiary: #3498db;
    --color-accent-yellow: #ffb300;
    --color-accent-gold: #f8c146;
    --color-accent-star: #ffc107;

    /* ---- Link / Action Colors ---- */
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-link-shadow: rgba(0, 123, 255, 0.3);

    /* ---- Text Colors ---- */
    --color-text-on-dark: #ffffff;
    --color-text-primary: #374151;
    --color-text-secondary: #6b7280;
    --color-text-dark: #2c3e50;
    --color-text-heading: #1C71D8;
    --color-text-muted: #6c757d;
    --color-text-light: #64748b;
    --color-text-body: #4b5563;
    --color-text-excerpt: #4a4a4a;
    --color-text-black: #000;
    --color-text-banner: #8A8B8C;
    --color-text-dark-heading: #1a1a2e;
    --color-text-medium: #333;
    --color-text-soft: #666;
    --color-text-caption: #555;
    --color-text-meta: #888;

    /* ---- Background Colors ---- */
    --color-bg-body: #ffffff;
    --color-bg-page: #f9f9f9;
    --color-bg-light: #f0f0f0;
    --color-bg-lighter: #f8f9fa;
    --color-bg-card: #ffffff;
    --color-bg-info: #e8f4fd;
    --color-bg-info-alt: #e0f2fe;
    --color-bg-code: #f5f5f5;
    --color-bg-code-block: #f4f4f4;
    --color-bg-shimmer: #f6f6f6;
    --color-bg-success: #d1fae5;
    --color-bg-error: #fee2e2;
    --color-bg-btn-muted: #6c757d;
    --color-bg-btn-muted-hover: #5a6268;
    --color-bg-disabled: #9ca3af;

    /* ---- Border Colors ---- */
    --color-border: #e1e1e1;
    --color-border-light: #f0f0f0;
    --color-border-medium: #eee;
    --color-border-divider: #DCDCDD;
    --color-border-input: #d1d5db;
    --color-border-dashed: #ddd;
    --color-border-success: #6ee7b7;
    --color-border-error: #fca5a5;
    --color-border-card: #e5e7eb;

    /* ---- Shadow Colors ---- */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.15);
    --color-shadow-heavy: rgba(0, 0, 0, 0.35);
    --color-shadow-overlay: rgba(0, 0, 0, 0.5);

    /* ---- Status Colors ---- */
    --color-success: #047857;
    --color-error: #dc2626;
    --color-featured-red: #ff3b30;
    --color-featured-red-glow: rgba(255, 59, 48, 0.4);
    --color-info-dark: #0369a1;

    /* ---- Sidebar / Blog Detail ---- */
    --color-sidebar-heading: #fc5356;
    --color-sidebar-title: #20247b;
    --color-sidebar-meta: #6F8BA4;
    --color-code-inline: #c7254e;

    /* ---- Footer ---- */
    --color-footer-text: #a6a7ab;
    --color-footer-border: #a6a7ab;

    /* ---- Slider / Nav ---- */
    --color-slider-nav: #3c376f;
    --color-slider-dot: #bbd5f3;
    --color-slider-dot-active: #1b73d8;
    --color-testimonial-name: #0a69ed;
    --color-testimonial-text: #262626;
    --color-testimonial-line: #e0e0e0;

    /* ---- Featured Blog Gradient ---- */
    --color-featured-grad-start: #3a1c71;
    --color-featured-grad-mid: #d76d77;
    --color-featured-grad-end: #ffaf7b;

    /* ---- Accent Colors (detail page feature icons) ---- */
    --color-accent-emerald: #10b981;
    --color-accent-android: #3ddc84;
    --color-accent-amber: #f59e0b;
    --color-accent-purple-dark: #9333ea;

    /* ---- Hero Section (homepage, about, apps) ---- */
    --color-hero-accent-purple: #8b5cf6;
    --color-hero-accent-purple-light: #a855f7;
    --color-hero-accent-indigo: #6366f1;
    --color-hero-accent-pink: #ec4899;

    /* ---- Non-Color Variables (shared) ---- */
    --border-radius: 12px;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;

    /* ---- Typography ---- */
    --font-family-regular: 'Open Sans Regular';
    --font-family-bold: 'Open Sans Bold';
    --font-family-italic: 'Open Sans Italic';

    /* ---- Legacy Aliases (backward compatibility) ----
       These map old variable names used in existing CSS
       to the new semantic names above. Will be removed
       once all CSS files are migrated to new names. */
    --primary-color: var(--color-primary);
    --light-primary-color: var(--color-primary-light);
    --secondary-color: var(--color-secondary);
    --tertiary-color: var(--color-tertiary);
    --yellow-color: var(--color-accent-yellow);
    --header-second-color: #CDD0D5;
    --white-color: var(--color-bg-body);
    --black-color: var(--color-text-primary);
    --footer-color: var(--color-footer-text);
    --header-title-color: var(--color-text-dark);
    --bg-color: var(--color-bg-page);
    --blog-text-color: var(--color-text-dark);
    --desc-color: var(--color-text-muted);
}

/* ============================================
   Dark Theme Overrides
   Activated by setting data-theme="dark" on <html>.
   Uses a slate blue-gray base for a modern,
   readable dark theme with AA contrast.
   ============================================ */

[data-theme="dark"] {
    /* ---- Brand Colors ---- */
    --color-primary: #3b82f6;
    --color-primary-light: #1e3a5f;
    --color-primary-hover: #60a5fa;
    --color-tertiary: #60a5fa;

    /* ---- Link / Action Colors ---- */
    --color-link: #60a5fa;
    --color-link-hover: #93c5fd;
    --color-link-shadow: rgba(96, 165, 250, 0.3);

    /* ---- Text Colors ---- */
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-dark: #f1f5f9;
    --color-text-heading: #60a5fa;
    --color-text-muted: #94a3b8;
    --color-text-light: #94a3b8;
    --color-text-body: #cbd5e1;
    --color-text-excerpt: #cbd5e1;
    --color-text-black: #f8fafc;
    --color-text-banner: #94a3b8;
    --color-text-dark-heading: #f1f5f9;
    --color-text-medium: #e2e8f0;
    --color-text-soft: #94a3b8;
    --color-text-caption: #94a3b8;
    --color-text-meta: #94a3b8;

    /* ---- Background Colors ---- */
    --color-bg-body: #0f172a;
    --color-bg-page: #1e293b;
    --color-bg-light: #334155;
    --color-bg-lighter: #1e293b;
    --color-bg-card: #1e293b;
    --color-bg-info: #172554;
    --color-bg-info-alt: #0c4a6e;
    --color-bg-code: #1e293b;
    --color-bg-code-block: #0f172a;
    --color-bg-shimmer: #334155;
    --color-bg-success: #052e16;
    --color-bg-error: #450a0a;
    --color-bg-btn-muted: #475569;
    --color-bg-btn-muted-hover: #64748b;
    --color-bg-disabled: #475569;

    /* ---- Border Colors ---- */
    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-border-medium: #334155;
    --color-border-divider: #334155;
    --color-border-input: #475569;
    --color-border-dashed: #475569;
    --color-border-success: #065f46;
    --color-border-error: #991b1b;
    --color-border-card: #334155;

    /* ---- Shadow Colors ---- */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-medium: rgba(0, 0, 0, 0.4);
    --color-shadow-heavy: rgba(0, 0, 0, 0.6);
    --color-shadow-overlay: rgba(0, 0, 0, 0.7);

    /* ---- Status Colors ---- */
    --color-success: #10b981;
    --color-error: #f87171;
    --color-featured-red: #fb7185;
    --color-featured-red-glow: rgba(251, 113, 133, 0.4);
    --color-info-dark: #38bdf8;

    /* ---- Sidebar / Blog Detail ---- */
    --color-sidebar-heading: #fb7185;
    --color-sidebar-title: #818cf8;
    --color-sidebar-meta: #94a3b8;
    --color-code-inline: #fb7185;

    /* ---- Footer ---- */
    --color-footer-text: #94a3b8;
    --color-footer-border: #334155;

    /* ---- Slider / Nav ---- */
    --color-slider-nav: #818cf8;
    --color-slider-dot: #334155;
    --color-slider-dot-active: #60a5fa;
    --color-testimonial-name: #60a5fa;
    --color-testimonial-text: #e2e8f0;
    --color-testimonial-line: #334155;

    /* ---- Non-Color Variables ---- */
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}