/* ===================================
   FONT DEFINITIONS
   Load custom Fira Code (with fallback)
=================================== */

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Fira_Code_v6.2/woff2/FiraCode-VF.woff2') format("woff2-variations"),
       url('../fonts/Fira_Code_v6.2/woff2/FiraCode-Regular.woff2') format("woff2");
}


/* ===================================
   COLOR PALETTE
   Neutral grays for light/dark themes
=================================== */

:root {
  --gray-100: #F8F7F5;
  --gray-200: #EDEBE7;
  --gray-300: #D6D4D2;
  --gray-700: #4A4846;
  --gray-800: #1F1E1C;
  --gray-900: #0F0E0D;
}


/* ===================================
   SEMANTIC TOKENS
   Map palette values to UI roles
=================================== */

:root {
  /* Typography */
  --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-family-mono: 'Fira Code', Consolas, monospace;

  /* Text colors */
  --color-text-primary: var(--gray-800);
  --color-text-secondary: var(--gray-700);

  /* Background colors */
  --color-background-primary: var(--gray-100);
  --color-background-secondary: var(--gray-200);
}


/* ===================================
   DARK THEME SUPPORT
   Overrides semantic tokens
=================================== */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-text-primary: var(--gray-100);
    --color-text-secondary: var(--gray-200);

    --color-background-primary: var(--gray-800);
    --color-background-secondary: var(--gray-700);
  }
}


/* ===================================
   BASE STYLES
   Normalize + apply global defaults
=================================== */

body {
  background: var(--color-background-primary);
}


/* ===================================
   UTILITIES
   Small, reusable helper classes
=================================== */

/* Typography */
.font--mono {
  font-family: var(--font-family-mono);
}

/* Text colors */
.text--primary {
  color: var(--color-text-primary);
}
.text--secondary {
  color: var(--color-text-secondary);
}

/* Background colors */
.bg--primary {
  background-color: var(--color-background-primary);
}
.bg--secondary {
  background-color: var(--color-background-secondary);
}

/* Responsive visibility */
.hidden--mobile {
  display: none;
}
@media screen and (min-width: 721px) {
  .hidden--mobile {
    display: initial;
  }
}

.hidden--desktop {
  display: none;
}
@media screen and (max-width: 720px) {
  .hidden--desktop {
    display: initial;
  }
}