globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Status.cafe widget */
#statuscafe {
  text-align: center;
}
#statuscafe-username {
  margin-bottom: 0.5em;
  font-weight: 600;
}
#statuscafe-username a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
#statuscafe-username a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
#statuscafe-content {
  margin: 0 1em 0.5em 1em;
  color: hsl(var(--muted-foreground));
}

/* Local fonts */
@font-face {
  font-family: 'Lexend';
  src: url('/fonts/Lexend-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/fonts/Lexend-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk[wght].woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('/fonts/NotoSansTC-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3100-312F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: 'Han Nom Gothic';
  src: url('/fonts/Han-Nom-Gothic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+2E80-2FFF, U+3000-303F, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2F800-2FA1F, U+F900-FAFF, U+FF0C;
}

@font-face {
  font-family: 'MonaspiceNe Nerd Font';
  src: url('/fonts/MonaspiceNeNerdFont-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Square';
  src: url('/fonts/Basier Square.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/fonts/BeVietnamPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/fonts/BeVietnamPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Grandstander';
  src: url('/fonts/Grandstander-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Grandstander';
  src: url('/fonts/Grandstander-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist[wght].woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit[wght].woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Recursive';
  src: url('/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tiresias Infofont';
  src: url('/fonts/Tiresias_Infofont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --background: 270 30% 10%;
    --foreground: 0 0% 95%;
    --card: 270 25% 15%;
    --card-foreground: 0 0% 95%;
    --popover: 270 25% 12%;
    --popover-foreground: 0 0% 95%;
    --primary: 195 100% 65%;
    --primary-foreground: 210 20% 10%;
    --secondary: 270 30% 20%;
    --secondary-foreground: 0 0% 98%;
    --muted: 270 25% 20%;
    --muted-foreground: 270 10% 75%;
    --accent: 270 30% 25%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 270 25% 25%;
    --input: 270 25% 25%;
    --ring: 195 100% 65%;
    --radius: 0.75rem;

    --font-system: "Adwaita Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --font-personal-heading: 'Lexend', var(--font-system);
    --font-personal-body: 'Lexend', var(--font-system);
    --font-monaspice: 'MonaspiceNe Nerd Font', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-zh-hans: 'Noto Sans SC', var(--font-system);
    --font-zh-hant: 'Noto Sans TC', var(--font-system);
    --font-vi-hani: 'Han Nom Gothic', 'Noto Sans TC', 'Noto Sans SC', serif;
  }

  .light {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 195 100% 40%;
    --primary-foreground: 210 40% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 40%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 195 100% 65%;
  }

  .dark {
    /* Dark theme inherits from :root */
  }

  /* High contrast overrides, dark */
  .high-contrast {
    --foreground: 0 0% 100%;
    --muted-foreground: 270 5% 85%;
    --border: 270 20% 40%;
    --primary: 195 100% 70%;
    --card: 270 30% 8%;
    --popover: 270 30% 8%;
  }

  /* High contrast overrides, light */
  .high-contrast.light {
    --foreground: 240 10% 2%;
    --muted-foreground: 240 5% 25%;
    --border: 240 6% 70%;
    --primary: 195 100% 30%;
    --card: 0 0% 100%;
    --popover: 0 0% 100%;
  }
}


/* Custom cursor overrides (designed by NOiiRE) */
*, *::before, *::after {
  cursor: url('/cursor/normal.gif'), auto;
}

:is(a, button, [role="button"], [role="link"], label[for], summary, select, [type="submit"], [type="reset"], [type="button"], .card-hover-effect, [onclick], [tabindex="0"]) {
  cursor: url('/cursor/link.gif'), pointer !important;
}

:is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dt, dd, td, th, caption, legend, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], textarea, [contenteditable="true"], [role="textbox"]) {
  cursor: url('/cursor/text.gif'), text !important;
}

:is([title], abbr[title], [role="tooltip"], [data-tooltip], [aria-describedby]) {
  cursor: url('/cursor/help.gif'), help !important;
}

:is([disabled], [aria-disabled="true"], button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: url('/cursor/unavailable.gif'), not-allowed !important;
}

[aria-busy="true"] {
  cursor: url('/cursor/busy.gif'), wait !important;
}

[draggable="true"] {
  cursor: url('/cursor/move.gif'), move !important;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  p, span, li, a {
    @apply font-body;
  }

  /* Force all code elements and their descendants to inherit monospace */
  :is(pre, code, kbd, samp),
  :is(pre, code, kbd, samp) * {
    font-family: var(--font-monaspice) !important;
  }

  /* WCAG 2.4.7: Enhanced focus visibility */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  a:focus-visible {
    @apply rounded-sm;
  }

  /* Screen reader only utility */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sr-only:focus,
  .sr-only:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  a.sr-only:focus {
    position: absolute;
  }
}

@layer utilities {
  /* Card hover effects */
  .card-hover-effect {
    @apply transition-all duration-300 hover:shadow-md hover:scale-[1.02] relative overflow-hidden cursor-pointer border border-border hover:border-primary/50;
  }

  .card-hover-effect::before {
    content: "";
    @apply absolute inset-0 bg-primary/5 opacity-0 hover:opacity-100 transition-opacity duration-300;
    z-index: 0;
  }

  .card-hover-effect > * {
    @apply relative z-10;
  }


}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:is(.reduce-motion *, .reduce-motion ::before, .reduce-motion ::after) {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

:is(.dyslexia-font, .dyslexia-font *) { font-family: 'OpenDyslexic', sans-serif !important; }
.personal-fonts :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-personal-heading) !important; }
:is(.personal-fonts, .personal-fonts :is(p, span, li, a, button)) { font-family: var(--font-personal-body); }

:is(.lexend-font, .atkinson-font, .basier-font, .be-vietnam-pro-font, .geist-font, .grandstander-font, .outfit-font, .recursive-font, .space-grotesk-font, .tiresias-font) {
  --preferred-font-family: inherit;
}

.lexend-font { --preferred-font-family: 'Lexend', var(--font-system); }
.atkinson-font { --preferred-font-family: 'Atkinson Hyperlegible', sans-serif; }
.basier-font { --preferred-font-family: 'Basier Square', sans-serif; }
.be-vietnam-pro-font { --preferred-font-family: 'Be Vietnam Pro', var(--font-system); }
.geist-font { --preferred-font-family: 'Geist', sans-serif; }
.grandstander-font { --preferred-font-family: 'Grandstander', sans-serif; }
.outfit-font { --preferred-font-family: 'Outfit', sans-serif; }
.recursive-font { --preferred-font-family: 'Recursive', sans-serif; }
.space-grotesk-font { --preferred-font-family: 'Space Grotesk', var(--font-system); }
.tiresias-font { --preferred-font-family: 'Tiresias Infofont', sans-serif; }

/* Apply the preferred font dynamically, but skip code elements */
:is(.lexend-font, .atkinson-font, .basier-font, .be-vietnam-pro-font, .geist-font, .grandstander-font, .outfit-font, .recursive-font, .space-grotesk-font, .tiresias-font) :not(pre, code, kbd, samp, pre *, code *, kbd *, samp *) {
  font-family: var(--preferred-font-family);
}

:is(.font-monaspice, .font-monaspice *) { font-family: var(--font-monaspice) !important; }
:is(.font-vi-hani, .font-vi-hani *) { font-family: var(--font-vi-hani) !important; }

/* Font preview dropdown styling */
.font-preview-select {
  min-width: 140px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.font-preview-select option {
  padding: 8px 12px;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  line-height: 1.6;
  font-size: 0.875rem;
}

:is([data-locale="zh"], [data-locale="zh"] *) {
  font-family: 'Noto Sans SC', var(--font-system) !important;
}

/* Stars background for dark mode */
:is(.stars-1a, .stars-2a, .stars-3a, .particles-1) {
  background: transparent;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

:is(.stars-1a, .stars-2a, .stars-3a) {
  opacity: 0;
  visibility: hidden;
}

.dark :is(.stars-1a, .stars-2a, .stars-3a) {
  visibility: visible;
}

/* Disable star effects when user preference is set */
[data-no-stars] :is(.stars-1a, .stars-2a, .stars-3a, .particles-1) {
  visibility: hidden !important;
  animation: none !important;
}

.stars-1a {
  background-image:
    radial-gradient(1px 1px at 5% 25%, #ffffff 70%, transparent),
    radial-gradient(1px 1px at 10% 10%, #ffffff 70%, transparent),
    radial-gradient(1.5px 1.5px at 20% 40%, #ffffff 70%, transparent);
  background-repeat: repeat;
  background-size: 247px 183px;
  animation: stars-twinkle-1 4s ease-in-out infinite;
}

.stars-2a {
  background-image:
    radial-gradient(1px 1px at 20% 0%, #ffffff 80%, transparent),
    radial-gradient(1px 1px at 40% 20%, #ffffff 80%, transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, #ffffff 80%, transparent);
  background-repeat: repeat;
  background-size: 331px 277px;
  animation: stars-twinkle-2 6s ease-in-out infinite;
  animation-delay: 1s;
}

.stars-3a {
  background-image:
    radial-gradient(1px 1px at 5% 5%, #ffffff 90%, transparent),
    radial-gradient(1px 1px at 80% 30%, #ffffff 90%, transparent),
    radial-gradient(1px 1px at 90% 80%, #ffffff 90%, transparent);
  background-repeat: repeat;
  background-size: 229px 193px;
  animation: stars-twinkle-3 9s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes stars-twinkle-1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes stars-twinkle-2 {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.5; }
  60% { opacity: 0.2; }
}

@keyframes stars-twinkle-3 {
  0%, 100% { opacity: 1; }
  33% { opacity: 0.6; }
  66% { opacity: 0.4; }
}

.particles-1 {
  /* Light mode particles */
  opacity: 1;
  visibility: visible;
  background-image: radial-gradient(4px 4px at 20px 30px, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 40px 70px, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: particles-animation 60s linear infinite;
}

.dark .particles-1 {
  opacity: 0;
  visibility: hidden;
}

@keyframes particles-animation {
  from { transform: translateY(0); }
  to { transform: translateY(1000px); }
}

/* Blog styles */
.prose a {
  @apply text-primary underline hover:text-primary/80 transition-colors;
}

.blog-content img {
  @apply rounded-md mx-auto;
}

.blog-content figure {
  @apply my-8;
}

.blog-content figcaption {
  @apply text-center text-sm text-muted-foreground mt-2 italic;
}

.blog-content pre,
.blog-content blockquote {
  /* Enable text wrapping in code blocks and blockquotes */
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  @apply relative;
}

.blog-content pre,
.blog-content code {
  white-space: pre-wrap;
}

.copy-button {
  @apply absolute top-2 right-2 p-2 rounded bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all opacity-0 focus:opacity-100 focus-visible:ring-2 focus-visible:ring-ring;
}

.blog-content pre:hover .copy-button,
.blog-content pre:focus-within .copy-button,
.blog-content blockquote:hover .copy-button,
.blog-content blockquote:focus-within .copy-button {
  @apply opacity-100;
}

.copy-button.copied {
  @apply bg-green-600/20 text-green-600;
}

/* Badge pixelated rendering */
.pixelated {
  image-rendering: -webkit-optimize-contrast; /* Edge 79+, Chrome, Safari */
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: crisp-edges;
  image-rendering: pixelated; /* Standard */
}


/* View transitions */

/* Prevent flash of no content during page transitions */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: ease-in-out; }
::view-transition-old(root) { animation-name: fade-out;}
::view-transition-new(root) { animation-name: fade-in;}
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

.reduce-motion ::view-transition-old(root),
.reduce-motion ::view-transition-new(root) { animation: none; }

/* Keep brand-page font previews stable regardless of global font preference classes */
.brand-font-preview .font-heading { font-family: var(--font-personal-heading) !important; }
.brand-font-preview .font-body { font-family: var(--font-personal-body) !important; }
.brand-font-preview .font-monaspice { font-family: var(--font-monaspice) !important; }
.brand-font-preview .font-zh-hans { font-family: var(--font-zh-hans) !important; }
.brand-font-preview .font-vi-hani { font-family: var(--font-vi-hani) !important; }

/* Force Han-Nôm rendering for vi-Hani content */
:is(html[data-locale="vi-Hani"], [data-locale="vi-Hani"], [data-locale="vi-Hani"] *, :lang(vi-Hani), :lang(vi-Hani) *) {
  font-family: var(--font-vi-hani) !important;
}