justin.deal/src/styles/global.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@variant dark (&:where(.dark, .dark *));

@font-face {
  font-family: "Literata Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/literata:vf@latest/latin-opsz-normal.woff2)
    format("woff2-variations");
  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+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "press-start-2p";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff)
      format("woff");
  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+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@theme {
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "press-start-2p", ui-monospace, monospace;
  --font-serif: "Literata Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
  /* Gruvbox color mappings */
  --color-zag-dark: #282828; /* bg0 */
  --color-zag-light: #ebdbb2; /* fg */
  --color-zag-dark-muted: #928374; /* grey */
  --color-zag-light-muted: #504945; /* bg4 */
  
  --color-zag-accent-light: #b8bb26; /* primary */
  --color-zag-accent-light-muted: #a89984; /* button2 */
  --color-zag-accent-dark: #fe8019; /* secondary */
  --color-zag-accent-dark-muted: #fabd2f; /* tertiary */

  /* Additional special colors */
  --color-zag-button-primary: #b8bb26;
  --color-zag-button-secondary: #a89984;
  --color-zag-button-red: #fb4934;
  --color-zag-key: #fb4934;
  --color-zag-operator: #fe8019;
  --color-zag-value: #d3869b;
  --color-zag-type: #fabd2f;
  --color-zag-function: #b8bb26;
  --color-zag-string: #8ec07c;
  --color-zag-special: #83a598;
}

@layer base {
  :root {
    --zag-stroke: 2px;
    --zag-offset: 6px;
    --zag-transition-duration: 0.15s;
    --zag-transition-timing-function: ease-in-out;
  }

  .zag-transition {
    @media (prefers-reduced-motion: no-preference) {
      transition:
        background-color var(--zag-transition-duration) var(--zag-transition-timing-function),
        color var(--zag-transition-duration) var(--zag-transition-timing-function),
        fill var(--zag-transition-duration) var(--zag-transition-timing-function),
        border-color var(--zag-transition-duration) var(--zag-transition-timing-function),
        transform var(--zag-transition-duration) var(--zag-transition-timing-function);
    }
  }

  /* Base backgrounds and text */
  .zag-bg {
    background-color: var(--color-zag-light);
    :where(.dark, .dark *) & {
      background-color: var(--color-zag-dark);
    }
  }

  .-zag-bg {
    background-color: var(--color-zag-dark);
    :where(.dark, .dark *) & {
      background-color: var(--color-zag-light);
    }
  }

  .zag-text {
    color: var(--color-zag-dark);
    :where(.dark, .dark *) & {
      color: var(--color-zag-light);
    }
  }

  .-zag-text {
    color: var(--color-zag-light);
    :where(.dark, .dark *) & {
      color: var(--color-zag-dark);
    }
  }

  .zag-muted {
    color: var(--color-zag-dark-muted);
    :where(.dark, .dark *) & {
      color: var(--color-zag-light-muted);
    }
  }

  .zag-fill {
    fill: var(--color-zag-dark);
    &:where(.dark, .dark *) {
      fill: var(--color-zag-light);
    }
  }

  .zag-text-muted {
    color: var(--color-zag-dark-muted);
    &:where(.dark, .dark *) {
      color: var(--color-zag-light-muted);
    }
  }

  .zag-border-b {
    border-bottom: var(--zag-stroke) solid;
    border-color: var(--color-zag-dark);
    &:where(.dark, .dark *) {
      border-color: var(--color-zag-light);
    }
  }

  .zag-offset {
    text-underline-offset: var(--zag-offset);
  }

  .opsz {
    font-variation-settings: "opsz" 72;
  }

  /* === New accent classes === */

  .zag-button-primary {
    background-color: var(--color-zag-button-primary);
    color: var(--color-zag-dark);
  }

  .zag-button-secondary {
    background-color: var(--color-zag-button-secondary);
    color: var(--color-zag-dark);
  }

  .zag-button-red {
    background-color: var(--color-zag-button-red);
    color: var(--color-zag-dark);
  }

  .zag-special-text {
    color: var(--color-zag-special);
  }

  .zag-key {
    color: var(--color-zag-key);
  }

  .zag-operator {
    color: var(--color-zag-operator);
  }

  .zag-value {
    color: var(--color-zag-value);
  }

  .zag-type {
    color: var(--color-zag-type);
  }

  .zag-function {
    color: var(--color-zag-function);
  }

  .zag-string {
    color: var(--color-zag-string);
  }

  .zag-special {
    color: var(--color-zag-special);
  }
}