:root {
    --transition-speed: 0.35s;
    --radius-lg: 16px;
    --radius-md: 10px;
}

/* LIGHT THEME */
html[data-theme="light"] {
    --bg-primary: #ffffff;
    /* Pure White */
    --bg-secondary: #f8fafc;
    /* Slate 50 - Very subtle gray */
    --bg-card: #ffffff;
    /* White cards */

    --text-primary: #051c16;
    /* Dark Green - Almost Black */
    --text-secondary: #0f4d3f;
    /* Medium Islamic Green */

    --accent-primary: #0f4d3f;
    /* Primary Islamic Green */
    --accent-glow: rgba(15, 77, 63, 0.25);

    --accent-primary-rgb: 15, 77, 63;
    /* Green RGB for Light Mode */

    --border-color: rgba(15, 77, 63, 0.1);
    --shadow-soft: 0 10px 30px rgba(15, 77, 63, 0.08);

    /* Button Tokens */
    --btn-primary-bg: #0f4d3f;
    --btn-primary-fg: #ffffff;
    --btn-primary-hover: #0a332a;

    /* Retain original variable names mapped to new theme for backward compatibility if needed, 
     but goal is to replace usage with functional names */
    --foreground: var(--text-primary);
    --background: var(--bg-primary);
}

/* DARK THEME - Preserving existing Islamic Design */
html[data-theme="dark"] {
    /* Mapped from original usage */
    --bg-primary: #051c16;
    /* Original --background */
    --bg-secondary: #0f4d3f;
    /* Original Primary Green */
    --bg-card: #082820;
    /* Original .card-islamic bg */

    --text-primary: #e5e7eb;
    /* Original --foreground */
    --text-secondary: #9ca3af;
    /* Lightened gray for better contrast on dark */

    --accent-primary: #d9a441;
    /* Original --color-gold-accent */
    --accent-glow: rgba(217, 164, 65, 0.25);

    --accent-primary-rgb: 217, 164, 65;
    /* Gold RGB for Dark Mode */

    --border-color: rgba(217, 164, 65, 0.2);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Button Tokens */
    --btn-primary-bg: #0f4d3f;
    --btn-primary-fg: #ffffff;
    --btn-primary-hover: #145c4a;


    --foreground: var(--text-primary);
    --background: var(--bg-primary);
}