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

@layer base {
  /*
   * Simplified 5-color theme system
   * To add a new theme, just specify these 5 colors:
   * --theme-background: main page background
   * --theme-foreground: main text color
   * --theme-card: card/surface background (should contrast with background)
   * --theme-primary: primary action color (buttons, links, borders and header text)
   * --theme-accent: accent color (highlights, hover states)
   */

  :root {
    /* Dark theme values - defined once and reused */
    --dark-background: 33 41 54;      /* #212936 */
    --dark-foreground: 226 232 240;   /* #e2e8f0 */
    --dark-card: 45 55 72;            /* #2d3748 */
    --dark-primary: 68 128 218;       /* #63b3ed */
    --dark-accent: 129 230 217;       /* #81e6d9 */

    /* Dark theme (default) */
    --theme-background: var(--dark-background);
    --theme-foreground: var(--dark-foreground);
    --theme-card: var(--dark-card);
    --theme-primary: var(--dark-primary);
    --theme-accent: var(--dark-accent);
  }

  [data-theme="light"] {
    --theme-background: 248 250 252;   /* #f8fafc */
    --theme-foreground: 15 23 42;      /* #0f172a */
    --theme-card: 255 255 255;         /* #ffffff */
    --theme-primary: 37 99 235;        /* #2563eb */
    --theme-accent: 20 184 166;        /* #14b8a6 */
  }

  [data-theme="cyberpunk"] {
    --theme-background: 17 13 38;      /* #110d26 */
    --theme-foreground: 118 46 165;    /* #762ea5 */
    --theme-card: 12 25 63;            /* #0c193f */
    --theme-primary: 154 29 109;       /* #9a1d6d */
    --theme-accent: 239 99 242;        /* #ef63f2 */
  }

  [data-theme="mistymeadow"] {
    --theme-background: 214 217 218;   /* #d6d9da */
    --theme-foreground: 72 79 75;      /* #484f4b */
    --theme-card: 187 191 183;         /* #bbbfb7 */
    --theme-primary: 122 138 116;      /* #7a8a74 */
    --theme-accent: 157 169 150;       /* #9da996 */
  }
  
  [data-theme="canyondusk"] {
    --theme-background: 214 191 163;   /* #d6bfa3 */
    --theme-foreground: 51 54 60;      /* #33363c */
    --theme-card: 173 143 117;         /* #ad8f75 */
    --theme-primary: 97 135 144;       /* #618790 */
    --theme-accent: 255 149 103;       /* #ff9567 */
  }

  /* Derived colors - these automatically work with any theme */
  * {
    --color-background: var(--theme-background);
    --color-foreground: var(--theme-foreground);
    --color-card: var(--theme-card);
    --color-card-foreground: var(--theme-foreground);
    --color-primary: var(--theme-primary);
    --color-primary-foreground: var(--theme-background);
    --color-secondary: var(--theme-foreground);
    --color-secondary-foreground: var(--theme-background);
    --color-accent: var(--theme-accent);
    --color-accent-foreground: var(--theme-background);
  }

  /* Print styles */
  @media print {
    :root,
    [data-theme] {
      /* Force dark theme for PDF - reference the dark theme values */
      --theme-background: var(--dark-background);
      --theme-foreground: var(--dark-foreground);
      --theme-card: var(--dark-card);
      --theme-primary: var(--dark-primary);
      --theme-accent: var(--dark-accent);
    }
  }
}

@layer utilities {
  /* Hide elements in print/PDF */
  @media print {
    #theme-toggle,
    .print-hide {
      display: none !important;
    }
  }
}