@import "tailwindcss";
@import "tw-animate-css";

@import "./content.css";
@import "./code-highlighting.css";

@custom-variant dark (&:is(.dark *));

/* Williams Handwriting font import */
@font-face {
  font-family: "Williams Handwriting";
  src: url("/fonts/Williams-Handwriting-Regular-v1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  descent-override: normal;
}

@font-face {
  font-family: "Williams Handwriting Descent";
  src: url("/fonts/Williams-Handwriting-Regular-v1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  descent-override: 10%;
}

:root {
  --mirple: rgba(99, 102, 241, 1); /* Mirascope purple, same as #6366f1 */
  --mirple-accent: color-mix(in srgb, var(--mirple) 60%, transparent);
  --mirple-dark: rgba(84, 82, 220, 1); /* Darker purple */

  --text-2xs: clamp(0.5rem, 0.45rem + 0.4vw, 0.625rem); /* ~8-10px */
  --text-xs: clamp(0.6rem, 0.55rem + 0.5vw, 0.8rem); /* ~10-13px */
  --text-sm: clamp(0.7rem, 0.6rem + 0.75vw, 0.875rem); /* ~11-14px */
  --text-base: clamp(0.825rem, 0.7rem + 0.875vw, 1rem); /* ~13-16px */
  --text-lg: clamp(0.9rem, 0.75rem + 1vw, 1.125rem); /* ~14-18px */
  --text-xl: clamp(1rem, 0.825rem + 1.125vw, 1.25rem); /* ~16-20px */
  --text-2xl: clamp(1.125rem, 0.9rem + 1.5vw, 1.5rem); /* ~18-24px */
  --text-3xl: clamp(1.25rem, 0.95rem + 1.75vw, 1.75rem); /* ~20-28px */
  --text-4xl: clamp(1.5rem, 1.125rem + 2vw, 2.25rem); /* ~24-36px */
  --text-5xl: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); /* ~28-44px */
  --text-6xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem); /* ~36-56px */
  --text-7xl: clamp(2.75rem, 1.75rem + 4.5vw, 4.5rem); /* ~44-72px */
  --text-8xl: clamp(3.5rem, 2.5rem + 5vw, 5.5rem); /* ~56-88px */
  --text-9xl: clamp(4.5rem, 3rem + 6vw, 7rem); /* ~72-112px */

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: rgba(99, 102, 241, 0.2);
  --card-foreground: oklch(0.1 0.2041 282.8);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.1 0.2041 282.8);
  --primary: var(--mirple);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.68 0.15 180);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: var(--mirple-accent);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.65 0.15 30);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Header and footer height variables */
  --header-height-base: 86px; /* Standard header without selector (measured) */
  --header-height-with-selector: 140px; /* Header with sub-navbar for docs pages (measured) */
  --header-height: var(--header-height-base); /* Default value */
  --footer-height: 52px;

  /* Nav text variables */
  --color-nav-text: var(--color-foreground);
  --color-nav-text-hover: var(--mirple);
  --color-nav-text-shadow:
    0 2px 10px rgba(255, 255, 255, 0.3), 0 4px 20px rgba(255, 255, 255, 0.2);
  --color-nav-text-shadow-hover:
    0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);

  /* Paper texture variables */
  --text-offset: 2px;
  --texture-svg-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9' numOctaves='1' seed='2'/%3E%3CfeDiffuseLighting lighting-color='white' surfaceScale='1'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23grain)' opacity='0.6'/%3E%3C/svg%3E");
  --texture-svg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9' numOctaves='1' seed='2'/%3E%3CfeDiffuseLighting lighting-color='%23505050' surfaceScale='1'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23grain)' opacity='0.6'/%3E%3C/svg%3E");
  --texture-svg: var(--texture-svg-light);
  --texture-opacity: 0.3;
  --texture-opacity-element: 0.2;
  --texture-blend-mode: multiply;

  /* Discord logo variables */
  --discord-logo: url("/assets/branding/Discord-Logo-Blurple.svg");
}

.dark {
  --background: oklch(0.11 0.005 285.823);
  --foreground: oklch(0.95 0 0);
  --card: rgba(99, 102, 241, 0.2);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.11 0.005 285.823);
  --popover-foreground: oklch(0.95 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.5 0.12 195);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.18 0.025 270);
  --muted-foreground: oklch(0.75 0.015 286.067);
  --accent: var(--mirple-accent);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.5 0.17 30);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);

  /* Paper texture variables for dark mode */
  --texture-svg: var(--texture-svg-dark);
  --texture-opacity: 0.5;
  --texture-opacity-element: 0.5;
  --texture-blend-mode: screen;

  --color-nav-text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
  --color-nav-text-shadow-hover:
    0 2px 10px rgba(255, 255, 255, 0.3), 0 4px 20px rgba(255, 255, 255, 0.2);
}

.home-page {
  --foreground: oklch(0.985 0 0);
  --color-foreground: oklch(0.985 0 0);

  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.985 0 0);

  --color-nav-text: oklch(1 0 0);
  --color-nav-text-hover: oklch(1 0 0);
  --color-nav-text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
  --color-nav-text-shadow-hover:
    0 2px 10px rgba(255, 255, 255, 0.3), 0 4px 20px rgba(255, 255, 255, 0.2);

  /* Discord logo for landing page */
  --discord-logo: url("/assets/branding/Discord-Logo-White.svg");
}

/* For text over landing page backdrop - using nav text variables */
.nav-text {
  color: var(--color-nav-text);
  text-shadow: var(--color-nav-text-shadow);
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}
.nav-text:hover {
  color: var(--color-nav-text-hover);
  text-shadow: var(--color-nav-text-shadow-hover);
}

@theme inline {
  --color-mirple: var(--mirple);
  --color-mirple-dark: var(--mirple-dark);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-code-background: var(--color-background);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-size-code: clamp(0.6rem, 0.55rem + 0.5vw, 0.75rem);

  --font-size-2xs: var(--text-2xs);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-5xl: var(--text-5xl);
  --font-size-6xl: var(--text-6xl);
  --font-size-7xl: var(--text-7xl);
  --font-size-8xl: var(--text-8xl);
  --font-size-9xl: var(--text-9xl);

  /* Font stacks - Tailwind v4 maps these directly to font-* utilities */
  --font-sans:
    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-handwriting: "Williams Handwriting", cursive;
  --font-handwriting-descent: "Williams Handwriting Descent", cursive;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    /* Ported from website's body styles */
    @apply m-0 font-normal font-handwriting tracking-[0.01em] antialiased bg-background text-foreground;
  }

  code,
  kbd,
  samp,
  pre {
    @apply font-mono;
    font-size: var(--font-size-code);
  }

  /* Paper texture overlay for all non-home pages */
  body:not(:has(.watercolor-bg))::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: var(--texture-svg);
    opacity: var(--texture-opacity);
    mix-blend-mode: var(--texture-blend-mode);
    z-index: 150;
  }
}

@layer utilities {
  /* Paper texture effect utility class to apply to specific elements */
  .torn-paper-effect {
    clip-path: polygon(
      0% 4%,
      10% 0%,
      20% 2%,
      30% 0%,
      40% 3%,
      50% 0%,
      60% 2%,
      70% 0%,
      80% 3%,
      90% 0%,
      100% 4%,
      99% 20%,
      100% 35%,
      98% 50%,
      100% 65%,
      99% 80%,
      100% 96%,
      90% 100%,
      80% 97%,
      70% 100%,
      60% 98%,
      50% 100%,
      40% 97%,
      30% 100%,
      20% 98%,
      10% 100%,
      0% 96%,
      1% 80%,
      0% 65%,
      2% 50%,
      0% 35%,
      1% 20%
    );
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
  }

  .torn-paper-effect::before {
    background-image: var(--texture-svg-light);
    mix-blend-mode: multiply;
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  /* Textured background utility class that can be applied to specific elements */
  .textured-bg {
    position: relative;
  }

  .textured-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--texture-svg);
    opacity: var(--texture-opacity-element);
    mix-blend-mode: var(--texture-blend-mode);
    z-index: 1;
    border-radius: inherit;
  }

  /* Text shade (avoid shadow ambiguity) utility class for specific elements */
  .text-shade {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.3),
      0 4px 14px rgba(0, 0, 0, 0.2);
  }

  /* Box shade (avoid shadow ambiguity) utility class for specific elements */
  .box-shade {
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.3),
      0 4px 20px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease;
  }

  .box-shade:hover,
  .box-shade:focus {
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.4),
      0 4px 24px rgba(0, 0, 0, 0.3);
  }

  /* Discord logo utility class that auto-toggles between blurple and white */
  .discord-logo {
    background-image: var(--discord-logo);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
