module.exports = {
  theme: {
    colors: {
      "material-opaque": "rgb(var(--color-materialOpaque) / <alpha-value>)",
    },
  },
}

--color-materialOpaque-light: 246 246 246;

module.exports = {
  theme: {
    colors: {
     "material-ultra-thin-light": "rgba(var(--color-materialUltraThin-light))",
    },
  },
}

/// CSS
 --color-materialUltraThick-light: 246 246 246 / 0.84;

.bg-material-thin\/20 {
  background-color: color-mix(in oklab, var(--color-material-thin) /* oklch(0.96 0.0049 230 / 0.60) = #eff2f499 */ 20%, transparent);
}

@import "tailwindcss";

/* Light mode colors (default) */
@theme {
  --color-blue: oklch(0.65 0.18 237);
  --color-pink: oklch(0.68 0.22 350);
  --color-purple: oklch(0.65 0.2 280);
  --color-green: oklch(0.67 0.15 155);
  --color-orange: oklch(0.68 0.15 60);
  --color-yellow: oklch(0.75 0.12 100);
}

@layer theme {
  * {
    /* Dark mode overrides */
    @variant dark {
      --color-blue: oklch(0.7 0.16 237);
    --color-pink: oklch(0.73 0.2 350);
    --color-purple: oklch(0.7 0.18 280);
    --color-green: oklch(0.72 0.16 155);
    --color-orange: oklch(0.73 0.16 60);
    --color-yellow: oklch(0.78 0.14 100);
    }
  }

    
@layer theme {
  [data-theme=cute] * {
      /* Kawaii color overrides */
      --color-blue: oklch(0.85 0.12 237);
      --color-pink: oklch(0.87 0.16 350);
      --color-purple: oklch(0.84 0.14 280);
      --color-green: oklch(0.85 0.12 155);
      --color-orange: oklch(0.86 0.12 60);
      --color-yellow: oklch(0.9 0.1 100);
  }
  
     /* Kawaii dark mode overrides */
      @variant dark {
        --color-blue: oklch(0.65 0.14 237);
        --color-pink: oklch(0.7 0.18 350);
        --color-purple: oklch(0.67 0.16 280);
        --color-green: oklch(0.68 0.14 155);
        --color-orange: oklch(0.69 0.14 60);
        --color-yellow: oklch(0.73 0.12 100);
  }
}