/* ==========================================================================
   Bitsync B2B — Mockup Palettes (11 palettes)
   Single CSS file. Switch via:
     document.documentElement.dataset.palette = "kastex-blue"
     document.documentElement.dataset.theme   = "dark"
   ========================================================================== */

/* Default base — Grozd Purple is the implicit start */
:root {
  /* Neutrali (paleta-agnostic) */
  --n50:            #F4F4F6;
  --n100:           #E5E5EA;
  --n200:           #D1D1D6;
  --n400:           #8E8E93;
  --n600:           #48484A;
  --white:          #FFFFFF;
  --surface:        #FFFFFF;

  /* Status (paleta-agnostic) */
  --success:        #34C759;
  --success-bg:     #E6F4ED;
  --success-border: #B8DCC5;
  --success-ink:    #1F6742;
  --warning:        #FF9500;
  --warning-bg:     #FDF5E0;
  --warning-border: #F2DBA3;
  --warning-ink:    #6B4A0C;
  --danger:         #FF3B30;
  --danger-bg:      #FDEBEB;
  --danger-border:  #F3C2C2;
  --danger-ink:     #7A1F1F;
  --info:           #007AFF;

  /* Motion + radius */
  --ease:           cubic-bezier(.22, 1, .36, 1);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
}

/* ---------- 1. GROZD PURPLE (default) ---------- */
:root,
:root[data-palette="grozd-purple"] {
  --primary:        #5A3AB5;
  --deep:           #2D1B69;
  --p100:           #E6E0F5;
  --p300:           #C5B7EE;
  --p400:           #9B86DF;
  --light:          #F2EEF9;
  --tint:           #F9F6FD;
  --ink:            #1A1A2E;
  --gradient:       linear-gradient(135deg, #5A3AB5 0%, #2D1B69 100%);
  --primary-rgb:    90, 58, 181;
}

/* ---------- 2. KASTEX CORPORATE BLUE ---------- */
:root[data-palette="kastex-blue"] {
  --primary:        #0E77BB;
  --deep:           #0A4F7E;
  --p100:           #DBEAFE;
  --p300:           #93C5FD;
  --p400:           #60A5FA;
  --light:          #EFF6FF;
  --tint:           #F8FBFF;
  --ink:            #0F1B2E;
  --gradient:       linear-gradient(135deg, #0E77BB 0%, #0A4F7E 100%);
  --primary-rgb:    14, 119, 187;
}

/* ---------- 3. DEEP EMERALD ---------- */
:root[data-palette="deep-emerald"] {
  --primary:        #0F766E;
  --deep:           #064E3B;
  --p100:           #D1FAE5;
  --p300:           #6EE7B7;
  --p400:           #34D399;
  --light:          #ECFDF5;
  --tint:           #F0FDF4;
  --ink:            #0B1B17;
  --gradient:       linear-gradient(135deg, #0F766E 0%, #064E3B 100%);
  --primary-rgb:    15, 118, 110;
}

/* ---------- 4. MIDNIGHT BLUE ---------- */
:root[data-palette="midnight-blue"] {
  --primary:        #1E40AF;
  --deep:           #1E3A8A;
  --p100:           #DBEAFE;
  --p300:           #93C5FD;
  --p400:           #60A5FA;
  --light:          #EFF6FF;
  --tint:           #F8FAFC;
  --ink:            #0F172A;
  --gradient:       linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
  --primary-rgb:    30, 64, 175;
}

/* ---------- 5. WARM GRAPHITE / COPPER ---------- */
:root[data-palette="warm-graphite"] {
  --primary:        #B45309;
  --deep:           #78350F;
  --p100:           #FEF3C7;
  --p300:           #FCD34D;
  --p400:           #FBBF24;
  --light:          #FFFBEB;
  --tint:           #FFF8E6;
  --ink:            #171717;
  --gradient:       linear-gradient(135deg, #B45309 0%, #78350F 100%);
  --primary-rgb:    180, 83, 9;
}

/* ---------- 6. BURGUNDY CREAM ---------- */
:root[data-palette="burgundy-cream"] {
  --primary:        #9F1239;
  --deep:           #7F1D1D;
  --p100:           #FECACA;
  --p300:           #FCA5A5;
  --p400:           #F87171;
  --light:          #FFF1F2;
  --tint:           #FEF7F7;
  --ink:            #1F2937;
  --gradient:       linear-gradient(135deg, #9F1239 0%, #7F1D1D 100%);
  --primary-rgb:    159, 18, 57;
}

/* ---------- 7. ARCTIC TEAL ---------- */
:root[data-palette="arctic-teal"] {
  --primary:        #0891B2;
  --deep:           #155E75;
  --p100:           #CFFAFE;
  --p300:           #67E8F9;
  --p400:           #22D3EE;
  --light:          #ECFEFF;
  --tint:           #F0FDFF;
  --ink:            #0C2026;
  --gradient:       linear-gradient(135deg, #0891B2 0%, #155E75 100%);
  --primary-rgb:    8, 145, 178;
}

/* ---------- 8. NOIR GOLD ---------- */
:root[data-palette="noir-gold"] {
  --primary:        #A16207;
  --deep:           #713F12;
  --p100:           #FEF3C7;
  --p300:           #FACC15;
  --p400:           #EAB308;
  --light:          #FFFBEB;
  --tint:           #FFFDF6;
  --ink:            #0A0A0A;
  --gradient:       linear-gradient(135deg, #A16207 0%, #713F12 100%);
  --primary-rgb:    161, 98, 7;
}

/* ---------- 9. FOREST CLAY ---------- */
:root[data-palette="forest-clay"] {
  --primary:        #3F6212;
  --deep:           #1A2E05;
  --p100:           #ECFCCB;
  --p300:           #BEF264;
  --p400:           #A3E635;
  --light:          #F7FEE7;
  --tint:           #FAFFF1;
  --ink:            #1A1A0F;
  --gradient:       linear-gradient(135deg, #3F6212 0%, #1A2E05 100%);
  --primary-rgb:    63, 98, 18;
}

/* ---------- 10. ELECTRIC INDIGO ---------- */
:root[data-palette="electric-indigo"] {
  --primary:        #4F46E5;
  --deep:           #3730A3;
  --p100:           #E0E7FF;
  --p300:           #A5B4FC;
  --p400:           #818CF8;
  --light:          #EEF2FF;
  --tint:           #F5F7FF;
  --ink:            #0F0F1F;
  --gradient:       linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
  --primary-rgb:    79, 70, 229;
}

/* ---------- 11. SAND TERRACOTTA (Mediteranski / Crna Gora) ---------- */
:root[data-palette="sand-terracotta"] {
  --primary:        #C2410C;
  --deep:           #7C2D12;
  --p100:           #FED7AA;
  --p300:           #FDBA74;
  --p400:           #FB923C;
  --light:          #FFF7ED;
  --tint:           #FFFBF5;
  --ink:            #1F1310;
  --gradient:       linear-gradient(135deg, #C2410C 0%, #7C2D12 100%);
  --primary-rgb:    194, 65, 12;
}


/* ==========================================================================
   DARK MODE — token swap. Aktiviran sa :root[data-theme="dark"].
   ========================================================================== */
:root[data-theme="dark"] {
  --n50:            #1A1A2E;
  --n100:           #2A2A3E;
  --n200:           #3A3A4E;
  --n400:           #8E8E93;
  --n600:           #C5C5CA;
  --white:          #242436;
  --surface:        #1E1E2E;

  --success-bg:     #1A3A2A;
  --success-border: #2A5A3A;
  --warning-bg:     #3A2A1A;
  --warning-border: #5A4A2A;
  --danger-bg:      #3A1A1A;
  --danger-border:  #5A2A2A;
}

/* Per-palette dark tweaks (svjetliji accent na tamnoj pozadini) */
:root[data-palette="grozd-purple"][data-theme="dark"]    { --p300: #B9A5E8; --light: #2D2548; --tint: #322A50; }
:root[data-palette="kastex-blue"][data-theme="dark"]     { --p300: #82B6E8; --light: #1A2B3F; --tint: #1F3247; }
:root[data-palette="deep-emerald"][data-theme="dark"]    { --p300: #5BC9A8; --light: #0F2E26; --tint: #0A1F1A; }
:root[data-palette="midnight-blue"][data-theme="dark"]   { --p300: #82AAE8; --light: #1A2F4F; --tint: #1F3658; }
:root[data-palette="warm-graphite"][data-theme="dark"]   { --p300: #E0A04A; --light: #2F2210; --tint: #36281A; }
:root[data-palette="burgundy-cream"][data-theme="dark"]  { --p300: #E89094; --light: #3F1A1F; --tint: #4A2025; }
:root[data-palette="arctic-teal"][data-theme="dark"]     { --p300: #5DD2DC; --light: #0C2026; --tint: #0F2A32; }
:root[data-palette="noir-gold"][data-theme="dark"]       { --p300: #E8C44A; --light: #2F2510; --tint: #38291A; }
:root[data-palette="forest-clay"][data-theme="dark"]     { --p300: #A8D052; --light: #1E2F0F; --tint: #25381A; }
:root[data-palette="electric-indigo"][data-theme="dark"] { --p300: #8E94FA; --light: #1A1B3F; --tint: #1F204A; }
:root[data-palette="sand-terracotta"][data-theme="dark"] { --p300: #E89060; --light: #2F1B0F; --tint: #3A221A; }