/*
  styles.css
  This file controls the LOOK of the HTML:
  - colors
  - fonts
  - spacing
  - layout
  - backgrounds
*/

/* -----------------------------
   1) Site-wide variables (theme)
   -----------------------------
   :root is the top-level element (the HTML document).
   I define CSS "custom properties" (variables) here so I can change
   the entire site's style in one place.
*/
:root{
  /* Background color behind everything */
  --bg: #0b1220;

  /* "Card" surface background (slightly transparent white) */
  --surface: rgba(255, 255, 255, 0.06);

  /* Main text color (bright for dark background) */
  --text: #e8eefc;

  /* Muted text color (used for less important text) */
  --muted: rgba(232, 238, 252, 0.72);

  /* Accent color (used for highlights and hover) */
  --accent: #7c5cff;

  /* Rounded corners for cards/boxes */
  --radius: 16px;

  /* Max width of content so it doesn't stretch too wide on big screens */
  --maxw: 880px;
}

/* -----------------------------
   2) Global reset / defaults
   -----------------------------
   box-sizing: border-box makes width/height calculations easier:
   padding and borders won't increase the total size unexpectedly.
*/
*{
  box-sizing: border-box;
}

/* Make html/body take full height so background fills the screen */
html, body{
  height: 100%;
}

/* -----------------------------
   3) Body styling (global page)
   -----------------------------
   This sets the general style for the entire page.
*/
body{
  /* Remove browser's default margin (white border around page) */
  margin: 0;

  /*
    Font stack: if the first font isn't available, try the next.
    system-ui uses the user's OS default UI font (clean and modern).
  */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Line height improves readability */
  line-height: 1.6;

  /* Set default text color */
  color: var(--text);

  /*
    Background:
    We combine multiple layers:
    - Two radial gradients for subtle color glow
    - Then a solid base color (--bg)

    radial-gradient(size at position, color, transparent)
    This creates a soft "spotlight" effect behind content.
  */
  background:
    radial-gradient(
      900px 600px at 20% 10%,
      rgba(124, 92, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 90% 30%,
      rgba(0, 201, 255, 0.18),
      transparent 60%
    ),
    var(--bg);
}

/* -----------------------------
   4) Container layout
   -----------------------------
   Centers your content and limits width.
*/
.container{
  /* Limit line length for readability */
  max-width: var(--maxw);

  /* Center horizontally (auto left/right margins) */
  margin: 0 auto;

  /*
    Add padding around the content.
    Top/bottom padding is a bit larger than left/right.
  */
  padding: calc(var(--pad) * 1.4) var(--pad);
}

/* -----------------------------
   5) “Hero” card header
   -----------------------------
   This makes the header look like a card.
*/
.hero{
  /* Space inside the hero box */
  padding: var(--pad);

  /* Slightly transparent background to separate from page background */
  background: var(--surface);

  /* Thin border for definition */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Rounded corners */
  border-radius: var(--radius);

  /* Shadow gives a raised card effect */
  box-shadow: var(--shadow);
}

/* -----------------------------
   6) Heading styles
   -----------------------------
*/

/* Main heading */
h1{
  /*
    margin: top right bottom left
    Remove big default spacing and set a smaller bottom margin.
  */
  margin: 0 0 8px 0;

  /*
    Responsive font size:
    - min 28px
    - grows with screen width (4vw)
    - max 44px
  */
  font-size: clamp(28px, 4vw, 44px);

  /* Slightly tighter letter spacing looks more modern */
  letter-spacing: -0.02em;
}

/* Subtitle */
h2{
  margin: 0;

  /* Responsive sizing for subtitle */
  font-size: clamp(16px, 2.2vw, 20px);

  /* Slightly bold but not as heavy as h1 */
  font-weight: 600;

  /* Muted text so it doesn't compete with h1 */
  color: var(--muted);
}

/* -----------------------------
   7) Paragraph text
   -----------------------------
*/
p{
  /* Space above the paragraph */
  margin: 18px 0 0 0;

  /* Muted for softer look */
  color: var(--muted);

  /* Slightly larger than default for readability */
  font-size: 1.05rem;
}

/* -----------------------------
   8) Link styling
   -----------------------------
*/
a{
  /* Keep links readable on dark background */
  color: var(--text);

  /*
    Underline color (separate from text color).
    Makes the underline look like a subtle accent.
  */
  text-decoration-color: rgba(124, 92, 255, 0.7);

  /* Moves underline down a bit for better aesthetics */
  text-underline-offset: 3px;
}

/* When the user hovers a link, change the text to accent color */
a:hover{
  color: var(--accent);
}

/* -----------------------------
   9) Accessibility: Reduced motion
   -----------------------------
   Some users prefer reduced animation (motion sensitivity).
   This media query checks the OS setting and adjusts behavior.
*/
@media (prefers-reduced-motion: reduce){
  /*
    scroll-behavior can animate scrolling (if you add it later).
    This disables it when reduced motion is requested.
  */
  *{
    scroll-behavior: auto !important;
  }
  /* -----------------------------
   Navigation bar
   -----------------------------
   A simple top navigation with links.
*/
.navbar{
  /* Space inside the nav bar */
  padding: 16px var(--pad);

  /* Slight transparent background */
  background: rgba(255, 255, 255, 0.04);

  /* Subtle border at the bottom */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Style for navigation links */
.navbar a{
  /* Remove default underline */
  text-decoration: none;

  /* Use main text color */
  color: var(--text);

  /* Slightly bold for visibility */
  font-weight: 600;

  /* Smooth color transition on hover */
  transition: color 0.2s ease;
}

/* Hover effect */
.navbar a:hover{
  color: var(--accent);
}
}