/* ========== RESET MINIMAL ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* ========== FONTS ========== */
/* Main font (fallback) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* Fira Mono font */
@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Digital-7 font for clocks */
@font-face {
  font-family: 'Digital-7';
  src: url('../fonts/digital-7 (mono).ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== GLOBAL CSS VARIABLES ========== */
:root {
  /* Main colors (Dark Mode default) */
  --bg: #181a20;
  --card-bg: #23263a;
  --text: #f5f6fa;
  --text-muted: #b0b3c6;

  /* Accent colors */
  --accent1: #a259ff;   /* Purple */
  --accent2: #2ee6d6;   /* Teal */
  --accent3: #00b2ff;   /* Blue */

  /* Effects */
  --shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18);
  --radius: 1.2em;
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts and sizes */
  --font-main: 'Inter', 'Poppins', 'Roboto', Arial, sans-serif;
  --font-mono: 'Fira Mono', 'Courier New', monospace;
  --font-digital: 'Digital-7', monospace;
  --font-size: 1.18rem;
  --font-large: 2.2rem;
  --font-xlarge: 3.2rem;

  /* Accessibility colors */
  --text-high-contrast: #121212;
  --text-light-high-contrast: #f8f9fa;
  --text-inverse: #ffffff;
  --slider-bg: #444444;
  --error-color: #d32f2f;
  --success-color: #388e3c;

  --clock-primary-color: var(--accent3);
}

/* ========== LIGHT MODE VARIABLES ========== */
body.light-mode {
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --text: #2d3748;
  --text-muted: #718096;
  --shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
}

/* ========== SURFACE VARIABLES ========== */
body.light-mode {
  --surface-100: #f8fafc;
  --surface-200: #e2e8f0;
  --surface-300: #ffffff;
}

/* ========== HELPER CLASSES ========== */
.font-monospace {
  font-family: var(--font-mono) !important;
}

.font-digital {
  font-family: var(--font-digital) !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden {
  display: none !important;
}

/* ========== SCROLLBAR STYLING ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--accent3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent2);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent3) var(--bg);
}

/* === Global clock color override to prevent JS tick from changing colors === */
.time-display, .clock-date-display {
  color: var(--clock-primary-color) !important;
}