/* ==========================================================================
   theme.css
   Color system mapped from Figma tokens
   Strategy:
   - Primitive colors → semantic tokens
   - Light / Dark via data-theme
   - Bootstrap-compatible variables
   ========================================================================== */

/* =========================
   Base (primitive-neutral)
   ========================= */
:root {
    /* Gray scale */

    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;
    --brand-1: #D21A6C;
    --brand-2: #0F005C;
    --brand-3: #FFD540;
    --color-error: #E00000;
    --color-warrning: #FFD540;
    --color-success: #008243;
    --nautral-10: #FFF;
    --nautral-20: #F5F5F5;
    --nautral-30: #EDEDED;
    --nautral-40: #E0E0E0;
    --nautral-50: #C2C2C2;
    --nautral-60: #9E9E9E;
    --nautral-70: #757575;
    --nautral-80: #616161;
    --nautral-90: #383838;
    --nautral-100: #0A0A0A;
    --color-t16: #FB8100;
    --color-t13: #FFAE00;
    --color-p: #008243;
    --color-t18: #E00000;
    --color-active: #2FB6C0;
    --color-jade-green: #2FB6C0;
    --color-white:#FFFFFF;
}
:root {
    --grid-bg: var(--nautral-90);
    --grid-line: rgba(255,255,255,0.55);
    --cell-w: 34px;
    --cell-h: 8px;
    --stroke: 1px;
    --border-x: 16px;
    --border-y: 16px;
}


/* =========================
   Global usage
   ========================= */
body {
    background-color: var(--nautral-10);
    color: var(--nautral-90);
}

/* =========================
   Bootstrap variable mapping
   (Bootstrap 5 reads these)
   ========================= */
:root {
    --bs-body-bg: var(--nautral-10);
    --bs-body-color: var(--nautral-90);
    --bs-border-color: var(--nautral-100);
    --bs-primary: var(--nautral-90);
    --bs-primary-rgb: 79, 70, 229;
    --bs-success: var(--color-success);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
    --bs-info: var(--color-info);
}

/* =========================
   Utility helpers
   ========================= */
.bg-muted {
    background-color: var(--color-bg-muted);
}

.bg-subtle {
    background-color: var(--color-bg-subtle);
}
.bg-nautral-90 {
    background-color: var(--nautral-90);
}
.bg-nautral-60 {
    background-color: var(--nautral-60);
}
.text-muted {
    color: var(--nautral-60);
}

.text-subtle {
    color: var(--nautral-50);
}

.border-default {
    border-color: var(--nautral-100);
}

.card-shadow {
    background: var(--nautral-10);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}