/* ==========================================================================
   OMNI COLOR — FONTS STYLESHEET
   File: assets/css/fonts.css
   Purpose: Self-hosted variable font declarations with fallbacks
   Author: Omni Color
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INTER VARIABLE FONT (SANS — PRIMARY UI FONT)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-var.woff2") format("woff2-variations"),
    url("../../fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. JETBRAINS MONO VARIABLE FONT (CODE / HEX VALUES)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../fonts/jetbrains-mono-var.woff2") format("woff2-variations"),
    url("../../fonts/jetbrains-mono-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   3. FONT PRELOAD HINTS (browser preloads)
   -------------------------------------------------------------------------- */
.font-preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY OPTIMIZATION
   -------------------------------------------------------------------------- */
html {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-synthesis-small-caps: none;
}

body {
  font-optical-sizing: auto;
  font-variation-settings: normal;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "kern";
  font-kerning: normal;
}

/* --------------------------------------------------------------------------
   5. TABULAR NUMBERS (for hex, rgb, coordinates)
   -------------------------------------------------------------------------- */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

code,
pre,
kbd,
samp,
.hex-input,
.num-field__input,
.conv-row__value,
.shade-row__step,
.token-row__value,
.metric-row__value,
.picker__preview-hex {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

/* --------------------------------------------------------------------------
   6. FALLBACK FONT STACK DURING LOAD (FOUT mitigation)
   -------------------------------------------------------------------------- */
html.fonts-loading body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

html.fonts-ready body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

html.fonts-ready code,
html.fonts-ready pre,
html.fonts-ready kbd,
html.fonts-ready samp {
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", "Roboto Mono", Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   7. SYSTEM FONT FALLBACK (default until fonts load)
   -------------------------------------------------------------------------- */
:root {
  --font-sans-loaded: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono-loaded: "JetBrains Mono", "SF Mono", "Fira Code", "Roboto Mono",
    Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   8. PRINT — USE SERIF FONTS FOR READABILITY
   -------------------------------------------------------------------------- */
@media print {
  body {
    font-family: Georgia, "Times New Roman", Times, serif;
  }

  code,
  pre,
  kbd,
  samp {
    font-family: "Courier New", Courier, monospace;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

/* --------------------------------------------------------------------------
   9. REDUCED DATA / SLOW CONNECTIONS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-data: reduce) {
  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
  }

  code,
  pre,
  kbd,
  samp {
    font-family: Consolas, Monaco, "Courier New", monospace;
  }
}

/* --------------------------------------------------------------------------
   END OF FILE
   -------------------------------------------------------------------------- */