/* ============================================ */
/* Tutur Bangsa - Color Palette                 */
/* ============================================ */

:root {
    /* Primary Brand Colors */
    --color-primary: #B22222;        /* Firebrick Red */
    --color-primary-dark: #8B1A1A;   /* Dark Red */
    --color-primary-light: #FDF5F5;  /* Soft Red Background */
    --color-primary-gradient: linear-gradient(135deg, #B22222 0%, #D43A3A 100%);

    /* Neutral Colors */
    --color-dark: #111111;           /* Almost Black */
    --color-soft-black: #2C2C2C;     /* Soft Black untuk teks */
    --color-gray-700: #424242;
    --color-gray-500: #757575;
    --color-gray-400: #9E9E9E;
    --color-gray-300: #BDBDBD;
    --color-gray-200: #D9D9D9;
    --color-gray-100: #EBEBEB;
    --color-gray-soft: #F8F8F8;      /* Background soft */
    --color-white: #FFFFFF;

    /* Semantic Colors */
    --color-text: var(--color-soft-black);
    --color-text-light: var(--color-gray-500);
    --color-text-muted: var(--color-gray-400);
    --color-background: var(--color-white);
    --color-background-alt: var(--color-gray-soft);
    --color-border: var(--color-gray-200);
    --color-border-dark: var(--color-gray-700);

    /* Status Colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* Overlay & Shadow */
    --color-overlay-dark: rgba(0, 0, 0, 0.6);
    --color-overlay-light: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-red: 0 10px 20px -5px rgba(178, 34, 34, 0.2);
}

/* Utility Classes untuk Colors */
.bg-primary       { background-color: var(--color-primary); }
.bg-primary-dark  { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-dark          { background-color: var(--color-dark); }
.bg-soft-black    { background-color: var(--color-soft-black); }
.bg-gray-soft     { background-color: var(--color-gray-soft); }
.bg-white         { background-color: var(--color-white); }

.text-primary      { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-dark         { color: var(--color-dark); }
.text-soft-black   { color: var(--color-soft-black); }
.text-gray         { color: var(--color-gray-500); }
.text-muted        { color: var(--color-gray-400); }
.text-white        { color: var(--color-white); }

.border-primary { border-color: var(--color-primary); }

.gradient-red {
    background: var(--color-primary-gradient);
}