/*
Theme Name: SD Alpha
Theme URI:  https://surfdib.com
Description: Frontend theme matching SD Admin Theme 2 — 12 skin presets, dark/light mode, modern card-based design.
Version:     2.0.0
Author:      SurfDib
Author URI:  https://surfdib.com
License:     GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sd-alpha
*/

:root {
  --sdat2-primary: #5865F2;
  --sdat2-primary-rgb: 88,101,242;
  --sdat2-accent: #4752c4;
  --sdat2-accent-rgb: 71,82,196;
  --sdat2-gradient: linear-gradient(135deg,#5865F2,#4752C4);
  --sdat2-sidebar-w: 280px;
  --sdat2-left-w: 260px;
  --sdat2-transition: 0.15s ease;
  --sdat2-radius: 12px;
  --sdat2-radius-sm: 8px;
}

body.sdat2-mode-dark {
  --sdat2-bg: #0f172a;
  --sdat2-sidebar-bg: #0a0f1e;
  --sdat2-card-bg: #1e293b;
  --sdat2-text: #f1f5f9;
  --sdat2-text-muted: #64748b;
  --sdat2-border: rgba(99,102,241,0.12);
  --sdat2-hover: rgba(99,102,241,0.08);
}
body.sdat2-mode-light {
  --sdat2-bg: #f8fafc;
  --sdat2-sidebar-bg: #fff;
  --sdat2-card-bg: #fff;
  --sdat2-text: #0f172a;
  --sdat2-text-muted: #64748b;
  --sdat2-border: #e2e8f0;
  --sdat2-hover: rgba(99,102,241,0.06);
}

/* ============================================
   12 SKIN THEMES
   ============================================ */

/* 1. Discord */
body.sdat2-skin-discord.sdat2-mode-dark {
  --sdat2-bg: #313338;
  --sdat2-sidebar-bg: #2b2d31;
  --sdat2-card-bg: #2b2d31;
  --sdat2-text: #dbdee1;
  --sdat2-text-muted: #949ba4;
  --sdat2-border: #3f4147;
  --sdat2-hover: rgba(255,255,255,0.05);
  --sdat2-primary: #5865F2;
  --sdat2-primary-rgb: 88,101,242;
  --sdat2-accent: #4752c4;
  --sdat2-accent-rgb: 71,82,196;
  --sdat2-gradient: linear-gradient(135deg,#5865F2,#4752C4);
}
body.sdat2-skin-discord.sdat2-mode-light {
  --sdat2-bg: #f2f3f5;
  --sdat2-sidebar-bg: #e3e5e8;
  --sdat2-card-bg: #fff;
  --sdat2-text: #2e3338;
  --sdat2-text-muted: #747f8d;
  --sdat2-border: #d0d2d6;
  --sdat2-hover: rgba(0,0,0,0.04);
  --sdat2-primary: #5865F2;
  --sdat2-primary-rgb: 88,101,242;
  --sdat2-accent: #4752c4;
  --sdat2-accent-rgb: 71,82,196;
  --sdat2-gradient: linear-gradient(135deg,#5865F2,#4752C4);
}

/* 2. Perplexity */
body.sdat2-skin-perplexity.sdat2-mode-dark {
  --sdat2-bg: #0f0f1a;
  --sdat2-sidebar-bg: #1a1a2e;
  --sdat2-card-bg: #1a1a2e;
  --sdat2-text: #e4e4f0;
  --sdat2-text-muted: #8888aa;
  --sdat2-border: #2a2a44;
  --sdat2-hover: rgba(255,255,255,0.05);
  --sdat2-primary: #8b5cf6;
  --sdat2-primary-rgb: 139,92,246;
  --sdat2-accent: #7c3aed;
  --sdat2-accent-rgb: 124,58,237;
  --sdat2-gradient: linear-gradient(135deg,#8b5cf6,#6d28d9);
}
body.sdat2-skin-perplexity.sdat2-mode-light {
  --sdat2-bg: #f8f8fc;
  --sdat2-sidebar-bg: #fff;
  --sdat2-card-bg: #fff;
  --sdat2-text: #1a1a2e;
  --sdat2-text-muted: #6b6b89;
  --sdat2-border: #e4e4f0;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #8b5cf6;
  --sdat2-primary-rgb: 139,92,246;
  --sdat2-accent: #7c3aed;
  --sdat2-accent-rgb: 124,58,237;
  --sdat2-gradient: linear-gradient(135deg,#8b5cf6,#6d28d9);
}

/* 3. AntiGravity */
body.sdat2-skin-antigravity.sdat2-mode-dark {
  --sdat2-bg: #0a0a12;
  --sdat2-sidebar-bg: #0f0f1e;
  --sdat2-card-bg: rgba(255,255,255,0.04);
  --sdat2-text: #e0f0ff;
  --sdat2-text-muted: #6b8a9e;
  --sdat2-border: rgba(0,255,255,0.12);
  --sdat2-hover: rgba(0,255,255,0.06);
  --sdat2-primary: #00e5ff;
  --sdat2-primary-rgb: 0,229,255;
  --sdat2-accent: #7c3aed;
  --sdat2-accent-rgb: 124,58,237;
  --sdat2-gradient: linear-gradient(135deg,#00e5ff,#7c3aed);
}
body.sdat2-skin-antigravity.sdat2-mode-light {
  --sdat2-bg: #eef5ff;
  --sdat2-sidebar-bg: #e0eaff;
  --sdat2-card-bg: #fff;
  --sdat2-text: #0a1628;
  --sdat2-text-muted: #5a7a9a;
  --sdat2-border: #c0d4f0;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #00b8d4;
  --sdat2-primary-rgb: 0,184,212;
  --sdat2-accent: #7c3aed;
  --sdat2-accent-rgb: 124,58,237;
  --sdat2-gradient: linear-gradient(135deg,#00b8d4,#7c3aed);
}

/* 4. CodeDark (Catppuccin) */
body.sdat2-skin-codedark.sdat2-mode-dark {
  --sdat2-bg: #1e1e2e;
  --sdat2-sidebar-bg: #181825;
  --sdat2-card-bg: #252540;
  --sdat2-text: #cdd6f4;
  --sdat2-text-muted: #6c7086;
  --sdat2-border: #313244;
  --sdat2-hover: rgba(255,255,255,0.04);
  --sdat2-primary: #cba6f7;
  --sdat2-primary-rgb: 203,166,247;
  --sdat2-accent: #b4befe;
  --sdat2-accent-rgb: 180,190,254;
  --sdat2-gradient: linear-gradient(135deg,#cba6f7,#b4befe);
}
body.sdat2-skin-codedark.sdat2-mode-light {
  --sdat2-bg: #f5f5f9;
  --sdat2-sidebar-bg: #e8e8f0;
  --sdat2-card-bg: #fff;
  --sdat2-text: #1e1e2e;
  --sdat2-text-muted: #6c7086;
  --sdat2-border: #d0d0dc;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #cba6f7;
  --sdat2-primary-rgb: 203,166,247;
  --sdat2-accent: #b4befe;
  --sdat2-accent-rgb: 180,190,254;
  --sdat2-gradient: linear-gradient(135deg,#cba6f7,#b4befe);
}

/* 5. CodeLight (GitHub) */
body.sdat2-skin-codelight.sdat2-mode-light {
  --sdat2-bg: #fff;
  --sdat2-sidebar-bg: #f6f8fa;
  --sdat2-card-bg: #fff;
  --sdat2-text: #24292f;
  --sdat2-text-muted: #656d76;
  --sdat2-border: #d0d7de;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #0969da;
  --sdat2-primary-rgb: 9,105,218;
  --sdat2-accent: #0550ae;
  --sdat2-accent-rgb: 5,80,174;
  --sdat2-gradient: linear-gradient(135deg,#0969da,#0550ae);
}
body.sdat2-skin-codelight.sdat2-mode-dark {
  --sdat2-bg: #0d1117;
  --sdat2-sidebar-bg: #161b22;
  --sdat2-card-bg: #161b22;
  --sdat2-text: #e6edf3;
  --sdat2-text-muted: #8b949e;
  --sdat2-border: #30363d;
  --sdat2-hover: rgba(255,255,255,0.04);
  --sdat2-primary: #58a6ff;
  --sdat2-primary-rgb: 88,166,255;
  --sdat2-accent: #1f6feb;
  --sdat2-accent-rgb: 31,111,235;
  --sdat2-gradient: linear-gradient(135deg,#58a6ff,#1f6feb);
}

/* 6. Nova */
body.sdat2-skin-nova.sdat2-mode-dark {
  --sdat2-bg: #0f172a;
  --sdat2-sidebar-bg: #1e1b4b;
  --sdat2-card-bg: #1e293b;
  --sdat2-text: #e2e8f0;
  --sdat2-text-muted: #64748b;
  --sdat2-border: rgba(99,102,241,0.15);
  --sdat2-hover: rgba(99,102,241,0.10);
  --sdat2-primary: #6366f1;
  --sdat2-primary-rgb: 99,102,241;
  --sdat2-accent: #a855f7;
  --sdat2-accent-rgb: 168,85,247;
  --sdat2-gradient: linear-gradient(135deg,#6366f1,#a855f7);
}
body.sdat2-skin-nova.sdat2-mode-light {
  --sdat2-bg: #f8fafc;
  --sdat2-sidebar-bg: #eef2ff;
  --sdat2-card-bg: #fff;
  --sdat2-text: #1e293b;
  --sdat2-text-muted: #64748b;
  --sdat2-border: #c7d2fe;
  --sdat2-hover: rgba(99,102,241,0.06);
  --sdat2-primary: #6366f1;
  --sdat2-primary-rgb: 99,102,241;
  --sdat2-accent: #a855f7;
  --sdat2-accent-rgb: 168,85,247;
  --sdat2-gradient: linear-gradient(135deg,#6366f1,#a855f7);
}

/* 7. Gruvbox */
body.sdat2-skin-gruvbox.sdat2-mode-dark {
  --sdat2-bg: #282828;
  --sdat2-sidebar-bg: #1d2021;
  --sdat2-card-bg: #3c3836;
  --sdat2-text: #ebdbb2;
  --sdat2-text-muted: #a89984;
  --sdat2-border: rgba(254,128,25,0.2);
  --sdat2-hover: rgba(254,128,25,0.08);
  --sdat2-primary: #fe8019;
  --sdat2-primary-rgb: 254,128,25;
  --sdat2-accent: #d65d0e;
  --sdat2-accent-rgb: 214,93,14;
  --sdat2-gradient: linear-gradient(135deg,#fe8019,#d65d0e);
}
body.sdat2-skin-gruvbox.sdat2-mode-light {
  --sdat2-bg: #fbf1c7;
  --sdat2-sidebar-bg: #ebdbb2;
  --sdat2-card-bg: #fff;
  --sdat2-text: #3c3836;
  --sdat2-text-muted: #928374;
  --sdat2-border: #d5c4a1;
  --sdat2-hover: rgba(0,0,0,0.04);
  --sdat2-primary: #d65d0e;
  --sdat2-primary-rgb: 214,93,14;
  --sdat2-accent: #9d0006;
  --sdat2-accent-rgb: 157,0,6;
  --sdat2-gradient: linear-gradient(135deg,#d65d0e,#9d0006);
}

/* 8. Cyberpunk */
body.sdat2-skin-cyberpunk.sdat2-mode-dark {
  --sdat2-bg: #0a0a0f;
  --sdat2-sidebar-bg: #0d0d1a;
  --sdat2-card-bg: #1a1a2e;
  --sdat2-text: #e0f0e0;
  --sdat2-text-muted: #6b8a7a;
  --sdat2-border: rgba(0,255,136,0.15);
  --sdat2-hover: rgba(0,255,136,0.06);
  --sdat2-primary: #00ff88;
  --sdat2-primary-rgb: 0,255,136;
  --sdat2-accent: #00b8ff;
  --sdat2-accent-rgb: 0,184,255;
  --sdat2-gradient: linear-gradient(135deg,#00ff88,#00b8ff);
}
body.sdat2-skin-cyberpunk.sdat2-mode-light {
  --sdat2-bg: #eafaf0;
  --sdat2-sidebar-bg: #d0f0dc;
  --sdat2-card-bg: #fff;
  --sdat2-text: #0a1a10;
  --sdat2-text-muted: #5a8a6a;
  --sdat2-border: #a0d4b4;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #00cc6a;
  --sdat2-primary-rgb: 0,204,106;
  --sdat2-accent: #0099cc;
  --sdat2-accent-rgb: 0,153,204;
  --sdat2-gradient: linear-gradient(135deg,#00cc6a,#0099cc);
}

/* 9. Sunset */
body.sdat2-skin-sunset.sdat2-mode-dark {
  --sdat2-bg: #1a0f0a;
  --sdat2-sidebar-bg: #24120a;
  --sdat2-card-bg: #2d1810;
  --sdat2-text: #f0e0d0;
  --sdat2-text-muted: #9a7a6a;
  --sdat2-border: rgba(249,115,22,0.15);
  --sdat2-hover: rgba(249,115,22,0.06);
  --sdat2-primary: #f97316;
  --sdat2-primary-rgb: 249,115,22;
  --sdat2-accent: #ef4444;
  --sdat2-accent-rgb: 239,68,68;
  --sdat2-gradient: linear-gradient(135deg,#f97316,#ef4444);
}
body.sdat2-skin-sunset.sdat2-mode-light {
  --sdat2-bg: #fef4e8;
  --sdat2-sidebar-bg: #fce4d0;
  --sdat2-card-bg: #fff;
  --sdat2-text: #1a0f0a;
  --sdat2-text-muted: #8a6a5a;
  --sdat2-border: #f0c8b0;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #ea580c;
  --sdat2-primary-rgb: 234,88,12;
  --sdat2-accent: #dc2626;
  --sdat2-accent-rgb: 220,38,38;
  --sdat2-gradient: linear-gradient(135deg,#ea580c,#dc2626);
}

/* 10. Matrix */
body.sdat2-skin-matrix.sdat2-mode-dark {
  --sdat2-bg: #0a0f0a;
  --sdat2-sidebar-bg: #0d1a0d;
  --sdat2-card-bg: #0f1f0f;
  --sdat2-text: #b3ffb3;
  --sdat2-text-muted: #6a9a6a;
  --sdat2-border: rgba(0,255,65,0.15);
  --sdat2-hover: rgba(0,255,65,0.06);
  --sdat2-primary: #00ff41;
  --sdat2-primary-rgb: 0,255,65;
  --sdat2-accent: #008a1e;
  --sdat2-accent-rgb: 0,138,30;
  --sdat2-gradient: linear-gradient(135deg,#00ff41,#008a1e);
}
body.sdat2-skin-matrix.sdat2-mode-light {
  --sdat2-bg: #eaf5ea;
  --sdat2-sidebar-bg: #d0e8d0;
  --sdat2-card-bg: #fff;
  --sdat2-text: #0a1a0a;
  --sdat2-text-muted: #5a8a5a;
  --sdat2-border: #a0d4a0;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #00cc33;
  --sdat2-primary-rgb: 0,204,51;
  --sdat2-accent: #006b18;
  --sdat2-accent-rgb: 0,107,24;
  --sdat2-gradient: linear-gradient(135deg,#00cc33,#006b18);
}

/* 11. Rose */
body.sdat2-skin-rose.sdat2-mode-dark {
  --sdat2-bg: #1a0a14;
  --sdat2-sidebar-bg: #240d1a;
  --sdat2-card-bg: #2d1222;
  --sdat2-text: #f0d0e0;
  --sdat2-text-muted: #9a6a7a;
  --sdat2-border: rgba(236,72,153,0.15);
  --sdat2-hover: rgba(236,72,153,0.06);
  --sdat2-primary: #ec4899;
  --sdat2-primary-rgb: 236,72,153;
  --sdat2-accent: #be185d;
  --sdat2-accent-rgb: 190,24,93;
  --sdat2-gradient: linear-gradient(135deg,#ec4899,#be185d);
}
body.sdat2-skin-rose.sdat2-mode-light {
  --sdat2-bg: #fef0f6;
  --sdat2-sidebar-bg: #fce0ee;
  --sdat2-card-bg: #fff;
  --sdat2-text: #1a0a14;
  --sdat2-text-muted: #8a5a6a;
  --sdat2-border: #f0b8d0;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #db2777;
  --sdat2-primary-rgb: 219,39,119;
  --sdat2-accent: #9d174d;
  --sdat2-accent-rgb: 157,23,77;
  --sdat2-gradient: linear-gradient(135deg,#db2777,#9d174d);
}

/* 12. Ocean */
body.sdat2-skin-ocean.sdat2-mode-dark {
  --sdat2-bg: #0a1218;
  --sdat2-sidebar-bg: #0a1620;
  --sdat2-card-bg: #12222e;
  --sdat2-text: #d0eaf0;
  --sdat2-text-muted: #6a8a9a;
  --sdat2-border: rgba(20,184,166,0.15);
  --sdat2-hover: rgba(20,184,166,0.06);
  --sdat2-primary: #14b8a6;
  --sdat2-primary-rgb: 20,184,166;
  --sdat2-accent: #0d9488;
  --sdat2-accent-rgb: 13,148,136;
  --sdat2-gradient: linear-gradient(135deg,#14b8a6,#0d9488);
}
body.sdat2-skin-ocean.sdat2-mode-light {
  --sdat2-bg: #eaf5f4;
  --sdat2-sidebar-bg: #d0eae6;
  --sdat2-card-bg: #fff;
  --sdat2-text: #0a1a18;
  --sdat2-text-muted: #5a8a80;
  --sdat2-border: #a0d4cc;
  --sdat2-hover: rgba(0,0,0,0.03);
  --sdat2-primary: #0d9488;
  --sdat2-primary-rgb: 13,148,136;
  --sdat2-accent: #0f766e;
  --sdat2-accent-rgb: 15,118,110;
  --sdat2-gradient: linear-gradient(135deg,#0d9488,#0f766e);
}