/* =========================================================
   ZYNDHUX BASE.CSS
   Design Foundation / Tokens / Reset / Typography
   ========================================================= */

/* =========================
   CSS RESET (MODERN)
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================
   ROOT TOKENS (DESIGN SYSTEM)
========================= */
:root {

  /* === CORE BRAND === */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-red: #950606;

  /* === EXTENDED RED SCALE === */
  --color-red-50:  #ffe5e5;
  --color-red-100: #f5baba;
  --color-red-200: #ea8f8f;
  --color-red-300: #df6464;
  --color-red-400: #d43939;
  --color-red-500: #c90e0e;
  --color-red-600: #950606; /* brand */
  --color-red-700: #7a0505;
  --color-red-800: #5f0404;
  --color-red-900: #3b0202;

  /* === GRAYSCALE (DARK UI) === */
  --color-bg-primary: #000000;
  --color-bg-secondary: #0f1115;
  --color-bg-tertiary: #1a1d22;

  --color-border: #2a2f36;
  --color-border-soft: #1f242a;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #b3b9c5;
  --color-text-muted: #7c8391;

  /* === STATES === */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* === INTERACTIONS === */
  --color-hover: rgba(255,255,255,0.05);
  --color-active: rgba(255,255,255,0.08);
  --color-focus: rgba(149, 6, 6, 0.6);

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.7);

  /* === RADIUS === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* === SPACING SCALE === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* === TYPOGRAPHY === */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-loose: 1.8;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

}

/* =========================
   BODY BASE
========================= */
body {
  font-family: var(--font-sans);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--text-md);
  line-height: var(--line-normal);
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--line-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p {
  color: var(--color-text-secondary);
}

/* =========================
   LINKS
========================= */
a {
  color: var(--color-red-400);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-red-300);
}

/* =========================
   BUTTON BASE
========================= */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);

  background: var(--color-red-600);
  color: var(--color-white);

  font-size: var(--text-sm);
  font-weight: 500;

  transition: 
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

button:hover {
  background: var(--color-red-500);
  transform: translateY(-1px);
}

button:active {
  background: var(--color-red-700);
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================
   INPUT BASE
========================= */
input,
textarea,
select {
  width: 100%;

  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);

  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);

  color: var(--color-text-primary);

  transition: 
    border var(--transition-fast),
    box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-red-600);
  box-shadow: 0 0 0 2px var(--color-focus);
}

/* =========================
   SCROLLBAR (WEBKIT)
========================= */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-red-700);
}

/* =========================
   SELECTION
========================= */
::selection {
  background: var(--color-red-600);
  color: var(--color-white);
}

/* =========================
   ACCESSIBILITY
========================= */
:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}

/* =========================
   UTILITY BASE (MIN)
========================= */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}