/*
 * Ghost Guild Design System
 * ========================
 *
 * Token naming convention:
 *   --color-{palette}-{shade}       Color palettes (50-950 scale)
 *   --color-circle-{name}-{variant} Circle-specific tokens
 *   --font-{role}                   Font family tokens
 *   --text-{scale}                  Typographic scale
 *   --leading-{role}                Line heights
 *   --tracking-{role}               Letter spacing
 *
 * Palettes:
 *   guild-*        Warm neutral ground (dark hall / workshop)
 *   candlelight-*  Primary warm accent (amber/gold/ochre)
 *   parchment-*    Light content surfaces (cream/vellum)
 *   ember-*        Secondary warm accent (deeper amber/rust)
 *   earth-*        Tertiary muted tones (brown/ochre)
 *
 * Usage guidelines:
 *   Backgrounds:    guild-900/950 (dark), parchment-50/100 (light surfaces)
 *   Text primary:   guild-100 (dark mode), guild-900 (light mode)
 *   Text secondary: guild-300/400
 *   Borders:        guild-700 (dark), guild-300 (light)
 *   Accents:        candlelight-* for links, highlights, interactive
 *   Surfaces:       parchment-* for readable content areas
 *
 * Effect classes:
 *   .ink-grain          Subtle noise overlay (mix-blend-mode: overlay)
 *   .paper-texture      Paper fiber overlay
 *   .woodcut-border     Irregular line border via border-image
 *   .candlelight-glow   Warm box-shadow (replaces .ethereal-glow)
 *   .warm-text          Warm text-shadow (replaces .ethereal-text)
 *   .guild-stamp        Circular decorative double-border frame
 *   .halftone-texture   Dot pattern overlay (updated for warm palette)
 *   .dithered-bg        Cross-hatch dither pattern
 *   .dithered-warm      Amber-tinted dither variant
 *   .prose-guild        Wiki/long-form content styling
 */

@import "./fonts.css";
@import "tailwindcss";
@import "@nuxt/ui";

@plugin "@tailwindcss/typography";

@theme {
  /* Font families */
  --font-sans: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Ubuntu Mono", monospace;
  --font-display: "Quietism", serif;
  --font-serif: "Quietism", serif;

  /* Guild - warm neutral ground (light mode: dark values for text on light bg) */
  --color-guild-50: #1a1510;
  --color-guild-100: #2a241c;
  --color-guild-200: #3a332a;
  --color-guild-300: #524939;
  --color-guild-400: #6b5f4d;
  --color-guild-500: #8a7c68;
  --color-guild-600: #a49585;
  --color-guild-700: #bfb3a2;
  --color-guild-800: #d9d0c3;
  --color-guild-900: #f0ebe4;
  --color-guild-950: #f8f5f0;

  /* Candlelight - primary warm accent (amber/gold/ochre) */
  --color-candlelight-50: #1f1708;
  --color-candlelight-100: #3d2c0f;
  --color-candlelight-200: #5c4118;
  --color-candlelight-300: #7b5822;
  --color-candlelight-400: #9a6f2c;
  --color-candlelight-500: #b8873a;
  --color-candlelight-600: #d09e4e;
  --color-candlelight-700: #e0b86e;
  --color-candlelight-800: #ecd09a;
  --color-candlelight-900: #f5e6c5;
  --color-candlelight-950: #faf2e0;

  /* Parchment - light content surfaces (cream/vellum) */
  --color-parchment-50: #1d1a14;
  --color-parchment-100: #332e24;
  --color-parchment-200: #4a4234;
  --color-parchment-300: #635844;
  --color-parchment-400: #7d6e56;
  --color-parchment-500: #97866c;
  --color-parchment-600: #afa088;
  --color-parchment-700: #c8baa5;
  --color-parchment-800: #ddd3c3;
  --color-parchment-900: #f0ebe0;
  --color-parchment-950: #f9f6f0;

  /* Ember - secondary warm accent (deeper amber/rust) */
  --color-ember-50: #1e120b;
  --color-ember-100: #3b2215;
  --color-ember-200: #58321f;
  --color-ember-300: #76432a;
  --color-ember-400: #945535;
  --color-ember-500: #b26840;
  --color-ember-600: #c87e55;
  --color-ember-700: #da9a72;
  --color-ember-800: #e8b899;
  --color-ember-900: #f3d6c0;
  --color-ember-950: #f9ebe0;

  /* Earth - tertiary muted tones (brown/ochre) */
  --color-earth-50: #17140e;
  --color-earth-100: #2d271c;
  --color-earth-200: #433a2a;
  --color-earth-300: #5a4d39;
  --color-earth-400: #726148;
  --color-earth-500: #8a7658;
  --color-earth-600: #a08c6d;
  --color-earth-700: #b7a487;
  --color-earth-800: #cebda4;
  --color-earth-900: #e5d7c2;
  --color-earth-950: #f2ece1;
}

.dark {
  /* Guild - warm neutral (dark mode: light values) */
  --color-guild-50: #f0ebe4;
  --color-guild-100: #d9d0c3;
  --color-guild-200: #bfb3a2;
  --color-guild-300: #a49585;
  --color-guild-400: #8a7c68;
  --color-guild-500: #6b5f4d;
  --color-guild-600: #524939;
  --color-guild-700: #3a332a;
  --color-guild-800: #2a241c;
  --color-guild-900: #1a1510;
  --color-guild-950: #110e0a;

  /* Candlelight - primary warm accent (dark mode) */
  --color-candlelight-50: #faf2e0;
  --color-candlelight-100: #f5e6c5;
  --color-candlelight-200: #ecd09a;
  --color-candlelight-300: #e0b86e;
  --color-candlelight-400: #d09e4e;
  --color-candlelight-500: #b8873a;
  --color-candlelight-600: #9a6f2c;
  --color-candlelight-700: #7b5822;
  --color-candlelight-800: #5c4118;
  --color-candlelight-900: #3d2c0f;
  --color-candlelight-950: #1f1708;

  /* Parchment - light content surfaces (dark mode) */
  --color-parchment-50: #f9f6f0;
  --color-parchment-100: #f0ebe0;
  --color-parchment-200: #ddd3c3;
  --color-parchment-300: #c8baa5;
  --color-parchment-400: #afa088;
  --color-parchment-500: #97866c;
  --color-parchment-600: #7d6e56;
  --color-parchment-700: #635844;
  --color-parchment-800: #4a4234;
  --color-parchment-900: #332e24;
  --color-parchment-950: #1d1a14;

  /* Ember - secondary warm accent (dark mode) */
  --color-ember-50: #f9ebe0;
  --color-ember-100: #f3d6c0;
  --color-ember-200: #e8b899;
  --color-ember-300: #da9a72;
  --color-ember-400: #c87e55;
  --color-ember-500: #b26840;
  --color-ember-600: #945535;
  --color-ember-700: #76432a;
  --color-ember-800: #58321f;
  --color-ember-900: #3b2215;
  --color-ember-950: #1e120b;

  /* Earth - tertiary muted tones (dark mode) */
  --color-earth-50: #f2ece1;
  --color-earth-100: #e5d7c2;
  --color-earth-200: #cebda4;
  --color-earth-300: #b7a487;
  --color-earth-400: #a08c6d;
  --color-earth-500: #8a7658;
  --color-earth-600: #726148;
  --color-earth-700: #5a4d39;
  --color-earth-800: #433a2a;
  --color-earth-900: #2d271c;
  --color-earth-950: #17140e;
}

/* Circle-specific tokens */
:root {
  /* Community - warm hearth amber */
  --color-circle-community: #b8873a;
  --color-circle-community-light: #e0b86e;
  --color-circle-community-dark: #7b5822;
  --color-circle-community-bg: rgba(184, 135, 58, 0.1);

  /* Founder - forge copper/orange */
  --color-circle-founder: #b26840;
  --color-circle-founder-light: #da9a72;
  --color-circle-founder-dark: #76432a;
  --color-circle-founder-bg: rgba(178, 104, 64, 0.1);

  /* Practitioner - deep gold/ochre */
  --color-circle-practitioner: #8a7658;
  --color-circle-practitioner-light: #b7a487;
  --color-circle-practitioner-dark: #5a4d39;
  --color-circle-practitioner-bg: rgba(138, 118, 88, 0.1);

  /* Typographic scale */
  --text-display-xl: 3.5rem;
  --text-display-lg: 2.5rem;
  --text-display: 2rem;
  --text-display-sm: 1.5rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.6875rem;

  /* Line heights */
  --leading-display: 1.15;
  --leading-body: 1.65;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-wide: 0.05em;

  /* Ambient background - warm radial gradients */
  --ambient-bg:
    radial-gradient(
      circle at 20% 80%,
      rgba(184, 135, 58, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(178, 104, 64, 0.02) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(138, 118, 88, 0.01) 0%,
      transparent 50%
    );

  --halftone-pattern: radial-gradient(
    circle,
    rgba(42, 36, 28, 0.1) 1px,
    transparent 1px
  );
  --halftone-size: 8px 8px;
}

/* Dark mode */
.dark:root {
  --ambient-bg:
    radial-gradient(
      circle at 20% 80%,
      rgba(224, 184, 110, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(218, 154, 114, 0.02) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(183, 164, 135, 0.01) 0%,
      transparent 50%
    );

  --halftone-pattern: radial-gradient(
    circle,
    rgba(240, 235, 228, 0.1) 1px,
    transparent 1px
  );
}

html {
  @apply text-[--ui-text];
}

body {
  background: var(--ambient-bg), #f0ebe4;
  background-attachment: fixed;
}

.dark body {
  background: var(--ambient-bg), #1a1510;
}

/* Display typography utilities */
.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.text-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Halftone texture overlay */
.halftone-texture {
  position: relative;
}

.halftone-texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--halftone-pattern);
  background-size: var(--halftone-size);
  opacity: 0.1;
  pointer-events: none;
}

/* Craft/Material Effects */

/* Warm box-shadow (replaces .ethereal-glow) */
.candlelight-glow {
  box-shadow:
    0 0 20px rgba(184, 135, 58, 0.12),
    0 0 40px rgba(184, 135, 58, 0.06),
    inset 0 1px 0 rgba(240, 235, 228, 0.08);
}

/* Warm text-shadow (replaces .ethereal-text) */
.warm-text {
  text-shadow: 0 0 10px rgba(224, 184, 110, 0.25);
}

/* Subtle noise overlay */
.ink-grain {
  position: relative;
}

.ink-grain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/textures/grain.png");
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.04;
  pointer-events: none;
}

/* Paper fiber overlay */
.paper-texture {
  position: relative;
}

.paper-texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/textures/paper.png");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.04;
  pointer-events: none;
}

/* Irregular line border */
.woodcut-border {
  border-image: repeating-linear-gradient(
    90deg,
    var(--color-guild-700) 0px,
    var(--color-guild-600) 2px,
    var(--color-guild-700) 3px,
    transparent 3px,
    transparent 6px
  ) 4;
}

/* Circular decorative frame */
.guild-stamp {
  border: 2px solid var(--color-candlelight-600);
  outline: 2px solid var(--color-candlelight-700);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Warm interior feel for content areas */
.guild-interior {
  background: var(--ambient-bg);
  box-shadow: inset 0 2px 8px rgba(26, 21, 16, 0.06);
}

/* Dithered gradients */
.dithered-bg {
  background:
    linear-gradient(45deg, var(--color-guild-800) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-guild-800) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-guild-700) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-guild-700) 75%);
  background-size: 4px 4px;
  background-position:
    0 0,
    0 2px,
    2px -2px,
    -2px 0px;
}

/* Amber-tinted dither variant */
.dithered-warm {
  background:
    linear-gradient(45deg, var(--color-candlelight-800) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-candlelight-800) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-candlelight-700) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-candlelight-700) 75%);
  background-size: 4px 4px;
  background-position:
    0 0,
    0 2px,
    2px -2px,
    -2px 0px;
}

/* Prose overrides for guild wiki/long-form content */
.prose-guild {
  max-width: 72ch;
}

.prose-guild h1,
.prose-guild h2,
.prose-guild h3,
.prose-guild h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

.prose-guild a {
  color: var(--color-candlelight-600);
  text-decoration-color: var(--color-candlelight-700);
  text-underline-offset: 3px;
}

.prose-guild a:hover {
  color: var(--color-candlelight-500);
  text-decoration-color: var(--color-candlelight-500);
}

.prose-guild blockquote {
  background-color: var(--color-parchment-900);
  border-left-color: var(--color-candlelight-600);
  border-left-width: 3px;
  padding: 1rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.dark .prose-guild blockquote {
  background-color: var(--color-parchment-900);
  border-left-color: var(--color-candlelight-500);
}

/* Mobile responsive utilities */
@media (max-width: 1023px) {
  /* Prevent horizontal scroll on mobile */
  body {
    overflow-x: hidden;
  }

  /* Adjust halftone pattern for mobile */
  .halftone-texture::before {
    background-size: 6px 6px;
  }
}