/* ==========================================================================
   base.css — Software School Cosmic Cyber-Academy Theme
   Palette: Cosmic Midnight (#070913), Ruby Red (#E10600), Electric Cyan (#00E5FF)
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary-red: #E10600;
  --color-primary-red-glow: rgba(225, 6, 0, 0.4);
  --color-accent-cyan: #00E5FF;
  --color-accent-cyan-glow: rgba(0, 229, 255, 0.35);
  --color-accent-purple: #9D4EDD;

  /* Surfaces & Backgrounds */
  --bg-cosmic-dark: #070913;
  --bg-cosmic-card: rgba(18, 24, 42, 0.75);
  --bg-cosmic-card-hover: rgba(26, 34, 60, 0.85);
  --border-cosmic: rgba(255, 255, 255, 0.09);
  --border-cosmic-red: rgba(225, 6, 0, 0.3);
  --border-cosmic-cyan: rgba(0, 229, 255, 0.3);

  /* Typography */
  --text-white: #FFFFFF;
  --text-light: #E2E8F0;
  --text-muted: #94A3B8;
  --text-dim: #64748B;

  /* Semantic Status */
  --color-success: #00E676;
  --color-warning: #FFB300;
  --color-danger: #FF3B30;

  /* Layout & Geometry */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --sidebar-width: 260px;
  --header-height: 68px;

  /* Fonts */
  --font-base: "Segoe UI", "Tahoma", "Cairo", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-cosmic-dark);
  color: var(--text-light);
  font-family: var(--font-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] { direction: rtl; }

/* Subtle Ambient Cosmic Background */
body {
  background-color: #070913;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(225, 6, 0, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 229, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.03) 0%, transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-white);
  margin: 0 0 .5em 0;
  font-weight: 800;
  letter-spacing: -0.3px;
}

a {
  color: var(--color-accent-cyan);
  text-decoration: none;
  transition: all 0.2s ease;
}
a:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--color-accent-cyan-glow);
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--color-primary-red);
  color: #fff;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0E1B;
}
::-webkit-scrollbar-thumb {
  background: #1E2640;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-red);
}

.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 700;
}