/* IDN Gold Premium — Shared Theme v1 */
/* Source of truth: csstools.idngold.com/v1/theme.css */
/* Used by: idngold-premium, idngold-premium-tools */
/* NOT used by: idngold-tools (free, has its own local CSS) */

/* ============================================
   1. CSS VARIABLES (HSL format for Tailwind)
   ============================================ */

:root {
  /* Background */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;

  /* Card */
  --card: 0 0% 98%;
  --card-foreground: 0 0% 0%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;

  /* Primary: Antique Bronze (light mode) */
  --primary: 44 65% 35%;
  --primary-foreground: 0 0% 100%;

  /* Secondary: Tech Cyan (darker for light mode) */
  --secondary: 189 94% 28%;
  --secondary-foreground: 0 0% 100%;

  /* Muted */
  --muted: 240 4.8% 90%;
  --muted-foreground: 0 0% 30%;

  /* Accent */
  --accent: 189 94% 28%;
  --accent-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* Border / Input / Ring */
  --border: 44 20% 70%;
  --input: 44 20% 70%;
  --ring: 189 94% 35%;

  /* Surface */
  --surface: 0 0% 98%;
  --radius: 2px;

  /* Raw colors (non-HSL) */
  --gold-500: #D4AF37;
  --gold-dim: #8A7E57;
  --tech-500: #06B6D4;
  --tech-glow: #06B6D4;
  --obsidian: #050505;
  --charcoal: #0F0F11;
}

.dark {
  --background: 0 0% 2%;
  --foreground: 48 24% 94%;
  --card: 240 6% 6%;
  --card-foreground: 48 24% 94%;
  --popover: 240 6% 6%;
  --popover-foreground: 48 24% 94%;
  --primary: 46 65% 52%;
  --primary-foreground: 0 0% 0%;
  --secondary: 189 94% 43%;
  --secondary-foreground: 0 0% 100%;
  --muted: 240 5% 15%;
  --muted-foreground: 240 5% 65%;
  --accent: 189 94% 43%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 46 65% 52%;
  --input: 46 65% 52%;
  --ring: 189 94% 43%;
  --surface: 240 6% 4%;
}

/* ============================================
   2. BASE RESETS
   ============================================ */

*,
*::before,
*::after {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Josefin Sans", sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Marcellus", serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

::selection {
  background: rgba(6, 182, 212, 0.3);
  color: #ecfeff;
}

/* ============================================
   3. SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--primary) / 0.1);
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.8);
}

/* ============================================
   4. UTILITY CLASSES
   ============================================ */

.glass-card {
  background: hsl(var(--card) / 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 2px;
  color: hsl(var(--foreground));
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--card) / 0.8);
}

.art-deco-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.art-deco-card:hover {
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.1), 0 0 10px rgba(6, 182, 212, 0.15);
}

.deco-corner-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1px solid rgba(6, 182, 212, 0.5);
  border-left: 1px solid rgba(6, 182, 212, 0.5);
  opacity: 0.8;
}

.deco-corner-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 1px solid rgba(6, 182, 212, 0.5);
  border-right: 1px solid rgba(6, 182, 212, 0.5);
  opacity: 0.8;
}

.tool-content {
  font-family: "Josefin Sans", sans-serif;
}

/* Tier badge colors */
.tier-bronze { color: #6ee7b7; }
.tier-gold { color: #D4AF37; }
.tier-diamond { color: #a78bfa; }

.tier-badge-bronze { background: linear-gradient(135deg, #6ee7b7, #34d399); }
.tier-badge-gold { background: linear-gradient(135deg, #D4AF37, #F2E8C4, #AA8C2C); }
.tier-badge-diamond { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }

/* ============================================
   5. TYPOGRAPHY (code/mono)
   ============================================ */

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================
   6. INPUT RESETS
   ============================================ */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
  background: transparent;
}