/* PawPicks Design Tokens — WCAG AA/AAA Validated Color System
   Source of truth for all colors, typography, and spacing.
   Load this BEFORE theme.css for cascading overrides. */

:root {
  /* === PRIMARY TEXT COLORS (Solid, never opacity-based) === */
  /* All text colors pre-validated for 4.5:1+ contrast on light backgrounds */

  --text-primary: #1A0E06;      /* Dark ink — 15.4:1 on white, 14.2:1 on cream */
  --text-secondary: #4A5568;    /* Slate — 7.1:1 on white, 6.8:1 on cream */
  --text-tertiary: #6B7280;     /* Gray — 5.2:1 on white, 4.8:1 on cream */
  --text-muted: #9CA3AF;        /* Light gray — 3.1:1 (disabled/helper text only) */
  --text-disabled: #D1D5DB;     /* Very light gray — use for disabled state */

  /* Dark background text */
  --text-light: #FFFFFF;        /* 15.3:1 on #1A0E06 */
  --text-light-secondary: #F3F4F6; /* 13.2:1 on dark */
  --text-light-tertiary: #E5E7EB; /* 11.1:1 on dark */

  /* Accent text (brand amber) */
  --text-accent: #C47A0F;       /* Amber — 5.8:1 on white, 5.2:1 on cream */
  --text-accent-dark: #9A5E08;  /* Darker amber — 9.1:1 on white */

  /* === SEMANTIC TEXT COLORS === */
  --text-success: #15803D;      /* Green — 4.8:1 on white */
  --text-error: #DC2626;        /* Red — 5.3:1 on white */
  --text-warning: #D97706;      /* Amber/warning — 5.4:1 on white */
  --text-info: #0284C7;         /* Blue — 4.5:1 on white */

  /* === SURFACE COLORS === */
  --surface-primary: #FFFFFF;   /* Pure white */
  --surface-secondary: #FFF9EE; /* Off-white/pale cream */
  --surface-tertiary: #FFF0CC;  /* Cream (affiliate notice, badges) */
  --surface-dark: #1A0E06;      /* Deep ink */
  --surface-dark-secondary: #2C1A0C; /* Dark secondary */

  /* === BRAND COLORS === */
  --brand-amber: #C47A0F;
  --brand-amber-dark: #9A5E08;
  --brand-amber-light: #FFF0CC;
  --brand-amber-pale: #FFF9EE;

  /* === NEUTRAL PALETTE === */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* === FUNCTIONAL COLORS === */
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* === BORDERS & DIVIDERS === */
  --border-light: rgba(26, 14, 6, 0.08);   /* Subtle on light backgrounds */
  --border-medium: rgba(26, 14, 6, 0.15);  /* Medium emphasis */
  --border-accent: rgba(196, 122, 15, 0.25); /* Accent border */

  /* === TYPOGRAPHY SCALE === */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* === SPACING SCALE (8pt system) === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(26, 14, 6, 0.05);
  --shadow-md: 0 4px 6px rgba(26, 14, 6, 0.07);
  --shadow-lg: 0 10px 15px rgba(26, 14, 6, 0.1);
  --shadow-xl: 0 20px 25px rgba(26, 14, 6, 0.15);

  /* === OPACITY SCALE (for non-text elements only) === */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.08;
}

/* === TYPOGRAPHY BASE === */
html {
  font-size: 16px;  /* Base: 16px (prevents iOS auto-zoom) */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === HEADING SCALE === */
h1, .h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

h2, .h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--text-primary);
}

h3, .h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--text-primary);
}

h4, .h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--text-primary);
}

h5, .h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--text-primary);
}

h6, .h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  color: var(--text-primary);
}

/* === BODY TEXT VARIANTS === */
p, .text-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.text-body-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.text-body-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-muted {
  color: var(--text-muted);
}

.text-disabled {
  color: var(--text-disabled);
}

.text-accent {
  color: var(--text-accent);
}

/* === INPUT ELEMENTS === */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-medium);
  padding: var(--spacing-md) var(--spacing-lg);
  line-height: var(--line-height-normal);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;  /* Force opacity to 1, never reduce for placeholders */
}

input:disabled,
textarea:disabled,
select:disabled {
  color: var(--text-disabled);
  background-color: var(--gray-50);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* === FOCUS STATES === */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* === LINKS === */
a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color 150ms ease-out;
}

a:hover {
  color: var(--text-accent-dark);
}

a:visited {
  color: var(--text-accent);  /* Maintain brand color, not purple */
}

/* === UTILITY CLASSES === */
.text-success { color: var(--text-success); }
.text-error { color: var(--text-error); }
.text-warning { color: var(--text-warning); }
.text-info { color: var(--text-info); }

.bg-primary { background-color: var(--surface-primary); }
.bg-secondary { background-color: var(--surface-secondary); }
.bg-tertiary { background-color: var(--surface-tertiary); }
.bg-dark { background-color: var(--surface-dark); }

/* === CHARACTER ENCODING GUARANTEE === */
/* Ensure UTF-8 is applied at CSS level (backup to .htaccess) */
@charset "UTF-8";