/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/******************
     THEME 
*******************/
:root {
  /*=============== 
        COLORS - Light Mode (Default)
    =================*/

  /* Primary Color Palette (Purple) */
  --p-20: #faf5ff;
  --p-50: #f5f3ff;
  --p-100: #ede9fe;
  --p-200: #ddd6fe;
  --p-300: #c4b5fd;
  --p-400: #a78bfa;
  --p-500: #8b5cf6;
  --p-600: #7c3aed;
  --p-700: #6d28d9;
  --p-800: #5b21b6;
  --p-900: #4c1d95;
  --p-950: #2e1065;

  /* HSL codes for alpha transparency */
  --p-700-code: 262, 83%, 58%;
  --p-900-code: 262, 69%, 35%;
  --p-950-code: 262, 72%, 23%;

  /* Neutral Colors */
  --n-50: #f9fafb;
  --n-100: #f3f4f6;
  --n-200: #e5e7eb;
  --n-300: #d1d5db;
  --n-400: #9ca3af;
  --n-500: #6b7280;
  --n-600: #4b5563;
  --n-700: #374151;
  --n-800: #1f2937;
  --n-900: #111827;
  --n-950: #030712;
  --p-100-alpha: rgba(139, 92, 246, 0.1);

  /* Foreground/Background */
  --foreground-color: #ffffff;
  --background-color: #fff7ed;

  /* New simplified variables */
  --bg-primary: #fff7ed;
  --bg-secondary: #ffffff;
  --text-primary: #1e293b;
  --accent-color: #7c3aed;
  --border-color: #ede9fe;

  /* Gradients */
  --main-gradient-color: linear-gradient(to right, #7c3aed, #38bdf8);
  --gradient-color: linear-gradient(#fff7ed 10%, #ffffff);
}

/* NEON PURPLE TECH MODE */
body.neon-purple-tech {
  /* --- 1. CORE COLORS (Neon Purple Tech) --- */
  --bg-primary: #0A0612; /* deep dark purple-black */
  --bg-secondary: #1A102B; /* Surface / Card */
  --bg-tertiary: #2D1B3E; /* Lighter surface for hover */

  /* --- 2. MAPPING VARIABLES --- */
  --foreground-color: var(--bg-primary);
  --background-color: var(--bg-secondary);

  /* Grid lines - subtle purple */
  --p-100: #1A102B; /* Subtle grid lines */

  /* --- 3. TEXT COLORS --- */
  --text-primary: #EDE9FE; /* Text main */
  --n-500: #A78BFA; /* Text muted */
  --n-600: #C4B5FD; /* Brighter secondary text */
  --p-950: #FFFFFF; /* Pure white for headers */
  --p-600: #8B5CF6; /* Neon purple for emphasis */

  /* --- 4. ACCENT COLORS --- */
  --accent-color: #8B5CF6; /* Neon purple primary */
  --accent-hover: #A78BFA; /* Lighter purple hover */
  --accent-secondary: #EC4899; /* Soft neon pink */
  --border-color: #2D1B3E; /* Subtle borders */

  /* Color codes for transparency */
  --p-700-code: 139, 92, 246; /* Neon purple RGB */
  --p-950-code: 10, 6, 18; /* Deep purple-black RGB */

  /* --- 5. EFFECTS & GRADIENTS --- */
  --main-gradient-color: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --gradient-color: linear-gradient(#0A0612 10%, #1A102B);

  /* Glow Effects - Neon Purple Tech */
  --glow-strong: 0 0 25px rgba(139, 92, 246, 0.6);
  --glow-soft: 0 0 15px rgba(139, 92, 246, 0.3);
  --glow-subtle: 0 0 8px rgba(236, 72, 153, 0.2);
  --glow-pink: 0 0 20px rgba(236, 72, 153, 0.4);
}

/* Neon Purple Tech Mode Specific Styles */
body.neon-purple-tech {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Transition for smooth theme switch */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure child elements transition smoothly */
.page-content,
header,
.projects_cards,
footer,
.grid-background-wrapper {
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

/* Toggle Button Styles */
#theme-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

#theme-toggle .sun-icon {
  display: none;
}

#theme-toggle .moon-icon {
  display: none;
}

body.neon-purple-tech #theme-toggle .sun-icon {
  display: none;
}

body.neon-purple-tech #theme-toggle .purple-icon {
  display: block;
}

:root {
  /*================================= 
        FONTS -  Sử dụng Scale 1.125
    =================================*/
  /* 32px */
  --h1-font-size: 2rem;
  /* 36px */
  --h1-line-height: 2.25rem;

  /* 26px */
  --h2-font-size: 1.6rem;
  /* 32px */
  --h2-line-height: 2rem;

  /* 20px */
  --h3-font-size: 1.266rem;
  /* 24px */
  --h3-line-height: 1.5rem;

  /* 18px */
  --h4-font-size: 1.125rem;
  /* 16px */
  --h4-line-height: 1.5rem;

  /* 16px */
  --p-font-size: 1rem;
  /* 24px */
  --p-line-height: 1.5rem;

  --p-letter-spacing: 0.025rem;

  /* 12px */
  --caption-font-size: 0.875rem;
  /* 16px */
  --caption-line-height: 1rem;
}

/* =========================================
   NEON PURPLE TECH COMPONENT STYLES
   ========================================= */

/* Buttons - Neon Purple Tech */
body.neon-purple-tech .primaryButton {
  border-radius: 8px;
  background-color: var(--accent-color);
  box-shadow: var(--glow-strong);
  border: 1px solid var(--accent-hover);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.neon-purple-tech .primaryButton:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--glow-strong);
  transform: translateY(-2px);
}

body.neon-purple-tech .outlineButton {
  border-color: var(--accent-color);
  color: var(--accent-color);
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.neon-purple-tech .outlineButton:hover {
  box-shadow: var(--glow-soft);
  background-color: rgba(139, 92, 246, 0.1);
  transform: scale(1.02);
}

/* Cards - Neon Purple Tech */
body.neon-purple-tech .aboutMe__container,
body.neon-purple-tech .aboutMe__content_container,
body.neon-purple-tech .projects_cards,
body.neon-purple-tech .skills__grid_item {
  border-radius: 12px !important;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.neon-purple-tech .aboutMe__content_container {
  background: transparent;
}

body.neon-purple-tech .projects_cards:hover {
  border-color: var(--accent-color);
  box-shadow: var(--glow-soft);
  transform: translateY(-8px) scale(1.02);
}

/* Badges - Neon Purple Tech */
body.neon-purple-tech .icon-badges,
body.neon-purple-tech .badge {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  color: var(--text-primary);
}

body.neon-purple-tech .badge {
  background-color: var(--bg-tertiary);
  color: var(--accent-color);
}

/* Scrollbar - Neon Purple Tech */
body.neon-purple-tech::-webkit-scrollbar {
  width: 8px;
}

body.neon-purple-tech::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

body.neon-purple-tech::-webkit-scrollbar-thumb {
  background: #1A102B;
  border-radius: 0;
}

body.neon-purple-tech::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  box-shadow: var(--glow-soft);
}

/* GLOBAL SCROLLBAR (Light Mode & Default) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--n-50);
  border-left: 1px solid var(--n-200);
}

::-webkit-scrollbar-thumb {
  background-color: var(--p-300);
  border-radius: 2px;
  border: 1px solid var(--n-50);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--p-500);
  cursor: pointer;
}