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

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

/* Define CSS layers for better organization */
@layer base, components, utilities;

@layer base {
  /* Prevent theme flash by hiding content until theme is applied */
  html:not(.theme-loaded) body {
    display: none;
  }

  /* Enhanced transitions between themes */
  html.theme-loaded body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Add transition to all themed elements */
  .theme-transition-element {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Disable transitions when user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html.theme-loaded body,
    .theme-transition-element {
      transition: none !important;
    }
  }
}

@layer components {
  /* Font loading states */
  html:not(.fonts-loaded) body {
    /* Fallback font metrics that match your custom font */
    font-family: monospace;
  }

  html.fonts-loaded body {
    /* Your custom font */
    font-family: var(--font-mono);
    /* Add a subtle transition for font changes */
    transition: font-family 0.1s ease-out;
  }

  /* Hide elements with x-cloak until Alpine.js is loaded */
  [x-cloak] {
    display: none !important;
  }

  /* Add keyboard focus styling for keyboard navigation */
  .keyboard-focus {
    outline: 2px solid var(--color-zag-accent-dark);
    outline-offset: 2px;
  }
  
  /* Enhanced focus styles using :has() selector */
  /* Apply special styling to parent elements that contain focused elements */
  .nav-container:has(:focus-visible) {
    background-color: var(--color-zag-bg-hover);
    border-radius: 0.5rem;
  }
  
  /* Style form groups when they contain invalid inputs */
  .form-group:has(input:invalid:not(:placeholder-shown)) {
    border-color: var(--color-zag-button-red);
  }
  
  /* Style form groups when they contain valid inputs */
  .form-group:has(input:valid:not(:placeholder-shown)) {
    border-color: var(--color-zag-function);
  }
}

@layer base {
  /* Font declarations with optimized loading strategies */
  @font-face {
    font-family: "Literata Variable";
    font-style: normal;
    font-display: swap; /* Use swap for text fonts */
    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: optional; /* Use optional for decorative fonts */
    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;
  }
}

@layer base {
  @theme {
    /* Font variables */
    --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 */
    
    /* Card hover effect variables */
    --color-zag-bg: rgba(235, 219, 178, 0.8); /* Light mode card background */
    --color-zag-bg-hover: rgba(235, 219, 178, 1); /* Light mode card hover background */
    --color-zag-accent: rgba(184, 187, 38, 0.5); /* Light mode accent border */

    /* 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;
    
    /* Spacing and sizing variables */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Animation variables */
    --transition-fast: 150ms;
    --transition-medium: 300ms;
    --transition-slow: 500ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
  }
}

@layer base {
  :root {
    --zag-stroke: 2px;
    --zag-offset: 6px;
    --zag-transition-duration: 0.15s;
    --zag-transition-timing-function: ease-in-out;
    
    /* Container query breakpoints */
    --container-sm: 20rem; /* 320px */
    --container-md: 30rem; /* 480px */
    --container-lg: 40rem; /* 640px */
    --container-xl: 60rem; /* 960px */
  }
  
  .dark {
    --color-zag-bg: rgba(40, 40, 40, 0.8); /* Dark mode card background */
    --color-zag-bg-hover: rgba(40, 40, 40, 1); /* Dark mode card hover background */
    --color-zag-accent: rgba(254, 128, 25, 0.5); /* Dark mode accent border */
  }
  
  /* Container query context setup */
  .container-query {
    container-type: inline-size;
    container-name: layout;
  }
  
  /* Container query responsive classes */
  @container layout (min-width: 20rem) {
    .cq\:text-sm {
      font-size: 0.875rem;
    }
  }
  
  @container layout (min-width: 30rem) {
    .cq\:text-base {
      font-size: 1rem;
    }
  }
  
  @container layout (min-width: 40rem) {
    .cq\:text-lg {
      font-size: 1.125rem;
    }
  }
  
  @container layout (min-width: 60rem) {
    .cq\:text-xl {
      font-size: 1.25rem;
    }
  }
}

@layer components {
  /* Interactive element base transitions */
  .zag-interactive {
    position: relative;
    transition: all 0.2s ease;
    transform-origin: center;
  }
  
  /* Standard hover effect for buttons and interactive elements */
  .zag-interactive:hover {
    transform: translateY(-2px);
  }
  
  /* Active/pressed state */
  .zag-interactive:active {
    transform: translateY(0);
  }
  
  /* Focus state for keyboard navigation */
  .zag-interactive:focus-visible {
    outline: 2px solid var(--color-zag-accent-dark);
    outline-offset: 2px;
  }
  
  /* Button hover effects */
  .zag-button {
    position: relative;
    overflow: hidden;
  }
  
  .zag-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .zag-button:hover::after {
    opacity: 0.1;
  }
  
  .zag-button:active::after {
    opacity: 0.2;
  }
  
  /* Link hover effects */
  .zag-link {
    position: relative;
  }
  
  .zag-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.2s ease;
  }
  
  .zag-link:hover::after {
    width: 100%;
  }
  
  /* Enhanced parent-child relationships using :has() */
  /* Style card containers that have images */
  .card-container:has(img) {
    padding-top: 0;
  }
  
  /* Style form labels when their inputs are focused */
  label:has(+ input:focus-visible) {
    color: var(--color-zag-accent-dark);
    font-weight: 500;
  }
  
  /* Style navigation items that have active links */
  .nav-item:has(a.active) {
    background-color: var(--color-zag-bg-hover);
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .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),
        opacity var(--zag-transition-duration) var(--zag-transition-timing-function),
        box-shadow var(--zag-transition-duration) var(--zag-transition-timing-function);
    }
  }
}

@layer components {
  /* Theme transition animations for specific elements */
  @keyframes theme-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes theme-slide-up {
    from { 
      opacity: 0.5; 
      transform: translateY(10px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes theme-scale-in {
    from { 
      opacity: 0.8;
      transform: scale(0.95);
    }
    to { 
      opacity: 1;
      transform: scale(1);
    }
  }

  .theme-animate-fade {
    animation: theme-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .theme-animate-slide {
    animation: theme-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .theme-animate-scale {
    animation: theme-scale-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  /* Disable animations when user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .theme-animate-fade,
    .theme-animate-slide,
    .theme-animate-scale {
      animation: none !important;
    }
  }
}

@layer utilities {
  /* 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);
  }
}