/* =========================================================
   main.css — CSS Custom Properties, Reset, Base Styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* ---------------------------------------------------------
   Custom Properties (Design Tokens)
   Light theme is the default (`:root`); dark theme overrides
   the same variables under `@media (prefers-color-scheme: dark)`
   below. Hint browsers about both schemes via `color-scheme`.
   --------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Colors — light (day) */
  --color-bg:            #dee2e3;
  --color-surface:       #ffffff;
  --color-sidebar-bg:    #ffffff;
  --color-text-primary:  #111111;
  --color-text-inverse:  #ffffff;
  --color-text-muted:    #6b6b6b;
  --color-accent:        #0ec7a5;
  --color-border:        #000000;
  --color-overlay-bg:    rgba(0, 0, 0, 0.72);
  --color-card-overlay:  linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);

  /* Foreground for elements drawn on top of dark overlays
     (painting-view text/dividers). Stays white in BOTH themes,
     because the underlying backdrop is always dark-tinted blur. */
  --color-overlay-text:  #ffffff;

  /* Logo invert filter applied only in dark theme (overridden below) */
  --logo-filter:         none;

  /* Typography */
  --font-family-base:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-ui:      'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --font-size-base:     16px;
  --font-size-sm:       clamp(0.75rem, 1.2vw, 0.875rem);
  --font-size-md:       clamp(0.875rem, 1.5vw, 1rem);
  --font-size-lg:       clamp(1rem, 2vw, 1.25rem);
  --font-size-xl:       clamp(1.25rem, 3vw, 1.75rem);
  --font-size-xxl:      clamp(1.5rem, 4vw, 2.5rem);

  --line-height-base:   1.6;
  --line-height-tight:  1.25;

  /* Spacing */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           40px;
  --space-xxl:          64px;

  /* Layout */
  --sidebar-width:      33.33vw;
  --grid-gap:           clamp(12px, 2vw, 24px);
  --card-padding:       clamp(20px, 3vw, 40px);

  /* Transitions */
  --transition-base:    0.25s ease;
  --transition-slow:    0.45s ease;

  /* Z-index layers */
  --z-sidebar:          10;
  --z-modal-backdrop:   100;
  --z-modal:            110;
  --z-modal-close:      120;
}

/* ---------------------------------------------------------
   Dark (night) theme — auto via OS preference.
   Overrides only color tokens, so every component that uses
   `var(--color-*)` swaps automatically.
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #1a1a1a;
    --color-surface:       #0a0a0a;
    --color-sidebar-bg:    #0a0a0a;
    --color-text-primary:  #f0f0f0;
    --color-text-inverse:  #0a0a0a;
    --color-text-muted:    #9a9a9a;
    --color-border:        #2a2a2a;
    --color-overlay-bg:    rgba(0, 0, 0, 0.85);
    --color-card-overlay:  linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);

    /* Logo SVG is dark-on-transparent; invert it for dark bg. */
    --logo-filter:         invert(1) hue-rotate(180deg);
  }
}

/* ---------------------------------------------------------
   Modern CSS Reset
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: var(--line-height-tight);
}

dl, dt, dd {
  margin: 0;
}

/* ---------------------------------------------------------
   Focus visible (accessibility)
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Hidden attribute support
   --------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------
   Visually hidden (screen-reader only)
   --------------------------------------------------------- */
.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;
}

/* ---------------------------------------------------------
   Page block
   --------------------------------------------------------- */
.page {
  overflow-x: hidden;
}