/* ==========================================
   DIVINE DHARMA DESIGN SYSTEM
   File: css/variables.css
========================================== */

:root {

    /* ===============================
       BRAND COLORS
    =============================== */

    --color-primary: #C66A0A;
    --color-primary-dark: #A95508;
    --color-secondary: #D4AF37;
    --color-accent: #8B0000;

    --color-white: #FFFFFF;
    --color-ivory: #FFF8E7;
    --color-light: #F8F5F0;

    --color-dark: #151515;
    --color-dark-soft: #222222;

    --color-text: #333333;
    --color-text-light: #666666;

    --color-success: #2E7D32;
    --color-warning: #F9A825;
    --color-danger: #C62828;

    --color-border: #E8E3DA;

    /* ===============================
       GRADIENTS
    =============================== */

    --gradient-primary:
        linear-gradient(135deg,#C66A0A,#D4AF37);

    --gradient-red:
        linear-gradient(135deg,#8B0000,#C62828);

    --gradient-light:
        linear-gradient(180deg,#FFFDF9,#F7F2EA);

    --gradient-dark:
        linear-gradient(180deg,#1B1B1B,#0F0F0F);

    /* ===============================
       TYPOGRAPHY
    =============================== */

    --font-heading:
        "Cinzel", serif;

    --font-body:
        "Inter", sans-serif;

    --font-devanagari:
        "Noto Serif Devanagari", serif;

    /* Font Sizes */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.7rem;
    --fs-5xl: 3.5rem;

    /* ===============================
       FONT WEIGHTS
    =============================== */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* ===============================
       SPACING
    =============================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:48px;
    --space-10:64px;
    --space-11:80px;
    --space-12:100px;

    /* ===============================
       BORDER RADIUS
    =============================== */

    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-round:999px;

    /* ===============================
       SHADOWS
    =============================== */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 8px 25px rgba(0,0,0,.12);

    --shadow-lg:
        0 20px 45px rgba(0,0,0,.18);

    --shadow-gold:
        0 10px 30px rgba(212,175,55,.35);

    /* ===============================
       TRANSITIONS
    =============================== */

    --transition:
        all .3s ease;

    --transition-fast:
        all .2s ease;

    /* ===============================
       WEBSITE WIDTH
    =============================== */

    --container-width:1300px;

    /* ===============================
       HEADER
    =============================== */

    --header-height:80px;

}


/* ==========================================
   DARK MODE VARIABLES
========================================== */

body.dark{

    --color-light:#1A1A1A;

    --color-white:#252525;

    --color-ivory:#1F1F1F;

    --color-text:#F2F2F2;

    --color-text-light:#BEBEBE;

    --color-border:#3A3A3A;

}