/* ==========================================================================
   THEME.CSS — design tokens and CSS custom properties.
   ========================================================================== */

/* ============================================
   BASE TOKENS
   ============================================ */
:root {
  /* ---------- Background Colors ---------- */
  --bg-primary-color: #000000;
  --bg-secondary-color: #212121;
  --bg-tertiary-color: #3e3e3e;
  --bg-accent-color: #f8f8f8;
  --bg-hover-color: rgba(62, 17, 185, 0.522);
  --bg-active-color: rgba(255, 255, 255, 0.12);

  /* ---------- Slider Colors ---------- */
  --slider-track-color: rgba(117, 117, 117, 0.169);
  --slider-track-filled-color: rgba(255, 255, 255, 0.45);
  --slider-thumb-color: #84848432;
  --slider-track-color-left: rgba(44, 44, 44, 0.1);
  --slider-track-color-right: rgba(75, 75, 75, 0.1);

  /* ---------- Glass Blur ---------- */
  --glass-blur: 8px;
  --glass-blur-sm: 4px;
  --glass-blur-md: 12px;
  --glass-blur-lg: 20px;
  --glass-blur-xl: 24px;

  /* ---------- Glass Colors ---------- */
  --glass-bg-from: rgba(82, 82, 82, 0.115);
  --glass-bg-to: rgba(255, 255, 255, 0.03);
  --glass-bg-hover-from: rgba(192, 192, 192, 0.223);
  --glass-bg-hover-to: rgba(165, 165, 165, 0.1);
  --glass-bg-active-from: rgba(255, 255, 255, 0.397);
  --glass-bg-active-to: rgba(198, 198, 198, 0.197);

  /* ---------- Drawer Glass Colors ---------- */
  --glass-drawer-from: rgba(109, 109, 109, 0.136);
  --glass-drawer-to: rgba(96, 96, 96, 0.071);

  /* ---------- Thick Glass Colors ---------- */
  --thickglass-bg-from: rgba(255, 255, 255, 0.9);
  --thickglass-bg-to: rgba(195, 195, 195, 0.7);
  --thickglass-bg-hover-from: rgba(255, 255, 255, 0.9);
  --thickglass-bg-hover-to: rgba(210, 210, 210, 0.8);

  /* ---------- Text Colors ---------- */
  --text-primary-color: #ffffff;
  --text-accent-color: #ffffffc2;
  --text-brand-color: #1f57ff;
  --text-pro-color: #285efe;
  --text-secondary-color: #ffffffbb;
  --text-tertiary-color: #ffffff83;

  /* ---------- Border Colors ---------- */
  --border-primary-color: rgba(255, 255, 255, 0.1);
  --border-secondary-color: rgba(255, 255, 255, 0.174);
  --border-tertiary-color: rgba(168, 168, 168, 0.08);

  /* ---------- Shadow Colors ---------- */
  --shadow-inset-top: rgba(255, 255, 255, 0.32);
  --shadow-inset-bottom: rgba(130, 130, 130, 0.186);
  --shadow-drop: rgba(0, 0, 0, 0.099);
  --shadow-drop-sm: rgba(0, 0, 0, 0.134);
  --shadow-drop-hover: rgba(0, 0, 0, 0.341);

  /* ---------- Padding ---------- */
  --padding-xsm: 0.35rem;
  --padding-sm: 0.5rem;
  --padding-md: 0.8rem;
  --padding-lg: 1.5rem;
  --padding-xl: 2rem;
  --padding-2xl: 4rem;
  --padding-4xl: 8rem;

  /* ---------- Margin ---------- */
  --margin-sm: 0.4rem;
  --margin-md: 0.8rem;
  --margin-lg: 1.5rem;
  --margin-xl: 2rem;

  /* ---------- Gutter ---------- */
  --gutter-sm: 0.25rem;
  --gutter-md: 0.5rem;
  --gutter-lg: 0.8rem;
  --gutter-xl: 1.5rem;
  --gutter-2xl: 2rem;
  --gutter-3xl: 3rem;
  --gutter-4xl: 4rem;

  /* ---------- Font Size ---------- */
  --font-size-xxsm: 0.65rem;
  --font-size-xsm: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.2rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* ---------- Font Weight ---------- */
  --font-weight-xsm: 200;
  --font-weight-sm: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
  --font-weight-xl: 700;

  /* ---------- Border Radius ---------- */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.5rem;
  --border-radius-2xl: 2rem;
  --border-radius-3xl: 4rem;
  --border-radius-4xl: 8rem;
  --border-radius-5xl: 12rem;

  /* ---------- Box Shadow ---------- */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --box-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  --box-shadow-2xl: 0 2rem 4rem rgba(0, 0, 0, 0.1);

  /* ---------- Transition ---------- */
  --transition-sm: 0.2s cubic-bezier(0.25, 0, 0, 1);
  --transition-md: 0.3s cubic-bezier(0.25, 0, 0, 1);
  --transition-lg: 0.4s cubic-bezier(0.25, 0, 0, 1);
  --transition-xl: 0.5s cubic-bezier(0.25, 0, 0, 1);
  --transition-2xl: 0.6s cubic-bezier(0.25, 0, 0, 1);
}

/* ==========================================================================
   PROJECT EXTENSIONS — aashish.me design-engineer portfolio
   Everything above this line is the original theme.css, untouched.
   These are tokens the layout needs that the base system doesn't define
   yet, added in the same naming convention so they can move up into the
   base file later if useful elsewhere.
   Note: --text-brand-color / --text-pro-color (lime, #9ad013) exist above
   but are intentionally NOT used anywhere in this project — buttons and
   text highlights stay white-only per project direction.
   ========================================================================== */

/* ============================================
   PROJECT EXTENSIONS
   ============================================ */
:root {
  /* ---------- Fonts ---------- */
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;

  /* ---------- Display Font Sizes ---------- */
  --font-size-4xl: 2.75rem;
  --font-size-hero: clamp(2.4rem, 5vw, 3.4rem);
  --font-size-display: clamp(1.6rem, 3.2vw, 2.2rem);

  /* ---------- Border Radius ---------- */
  --border-radius-pill: 9999px;

  /* ---------- Glass Blur ---------- */
  --glass-blur-2xl: 32px;
  --glass-saturate: 1.7;

  /* ---------- Backdrop Scrim ---------- */
  --scrim-soft: rgba(13, 13, 15, 0.148);
  --scrim-mid: rgba(13, 13, 15, 0.331);
  --scrim-strong: rgba(13, 13, 15, 0.556);

  /* ---------- Status Colors ---------- */
  --status-live-color: #5fd97a;
  --status-live-ring-color: rgba(95, 217, 122, 0.35);
}