/* Theme System — Full Variable Set */

/* ---------- Candlefish Display Font ---------- */
@font-face {
  font-family: 'Candlefish';
  src: url(/assets/Candlefish-660c7f5fe01448b7ed891d534987a487c5cf101258f74e58277f6d4c9f02c4bd.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* FamilyProject defaults (public pages, new users) */
  --primary-color: #688058;
  --secondary-color: #2d4a2d;
  --accent-color: #90b8c8;
  --text-color: #383840;
  --heading-color: #1a1a2e;
  --muted-color: #9a9590;
  --background-color: #faf8f4;
  --surface-color: #ffffff;
  --border-color: #e8e4dd;
  --border-light-color: #f3efe8;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #688058;
  --focus-color: #90b8c8;

  /* Derived variables */
  --primary-hover: #2d4a2d;
  --primary-light: #f2f5f0;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #f2f5f0;
  --focus-ring: #90b8c8;
  --focus-ring-alpha: rgba(144, 184, 200, 0.3);
}

/* ---------- Theme Variant Overrides ---------- */
[data-theme="familyproject"] {
  --primary-color: #688058;
  --secondary-color: #2d4a2d;
  --accent-color: #90b8c8;
  --text-color: #383840;
  --heading-color: #1a1a2e;
  --muted-color: #9a9590;
  --background-color: #faf8f4;
  --surface-color: #ffffff;
  --border-color: #e8e4dd;
  --border-light-color: #f3efe8;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #688058;
  --focus-color: #90b8c8;
  --primary-hover: #2d4a2d;
  --primary-light: #f3efe8;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #f3efe8;
  --focus-ring: #90b8c8;
  --focus-ring-alpha: #90b8c84d;
}
[data-theme="forest"] {
  --primary-color: #2e452d;
  --secondary-color: #6f885d;
  --accent-color: #7da67d;
  --text-color: #1a1a1a;
  --heading-color: #1a1a1a;
  --muted-color: #9a9590;
  --background-color: #f7f9f7;
  --surface-color: #ffffff;
  --border-color: #dce4dc;
  --border-light-color: #ebf0eb;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #2e452d;
  --focus-color: #6f885d;
  --primary-hover: #6f885d;
  --primary-light: #ebf0eb;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #ebf0eb;
  --focus-ring: #6f885d;
  --focus-ring-alpha: #6f885d4d;
}
[data-theme="ocean"] {
  --primary-color: #1d3557;
  --secondary-color: #457b9d;
  --accent-color: #a8dadc;
  --text-color: #1a1a1a;
  --heading-color: #1d3557;
  --muted-color: #9a9590;
  --background-color: #f1f8fc;
  --surface-color: #ffffff;
  --border-color: #d1e3ed;
  --border-light-color: #e8f2f8;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #1d3557;
  --focus-color: #457b9d;
  --primary-hover: #457b9d;
  --primary-light: #e8f2f8;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #e8f2f8;
  --focus-ring: #457b9d;
  --focus-ring-alpha: #457b9d4d;
}
[data-theme="sunset"] {
  --primary-color: #6a4c93;
  --secondary-color: #8b5fbf;
  --accent-color: #c4a7d7;
  --text-color: #1a1a1a;
  --heading-color: #6a4c93;
  --muted-color: #9a9590;
  --background-color: #f8f5fc;
  --surface-color: #ffffff;
  --border-color: #e0d5eb;
  --border-light-color: #f0eaf5;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #6a4c93;
  --focus-color: #8b5fbf;
  --primary-hover: #8b5fbf;
  --primary-light: #f0eaf5;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #f0eaf5;
  --focus-ring: #8b5fbf;
  --focus-ring-alpha: #8b5fbf4d;
}
[data-theme="earth"] {
  --primary-color: #6f4e37;
  --secondary-color: #9b6f4d;
  --accent-color: #c4a882;
  --text-color: #1a1a1a;
  --heading-color: #6f4e37;
  --muted-color: #9a9590;
  --background-color: #faf7f5;
  --surface-color: #ffffff;
  --border-color: #e4dad2;
  --border-light-color: #f0ebe6;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #6f4e37;
  --focus-color: #9b6f4d;
  --primary-hover: #9b6f4d;
  --primary-light: #f0ebe6;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #f0ebe6;
  --focus-ring: #9b6f4d;
  --focus-ring-alpha: #9b6f4d4d;
}
[data-theme="olive"] {
  --primary-color: #606c38;
  --secondary-color: #8a9a5b;
  --accent-color: #b5c48b;
  --text-color: #1a1a1a;
  --heading-color: #606c38;
  --muted-color: #9a9590;
  --background-color: #f7f8f5;
  --surface-color: #ffffff;
  --border-color: #dce0d2;
  --border-light-color: #edf0e8;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #606c38;
  --focus-color: #8a9a5b;
  --primary-hover: #8a9a5b;
  --primary-light: #edf0e8;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #edf0e8;
  --focus-ring: #8a9a5b;
  --focus-ring-alpha: #8a9a5b4d;
}
[data-theme="slate"] {
  --primary-color: #2c3e50;
  --secondary-color: #95a5a6;
  --accent-color: #bdc3c7;
  --text-color: #1a1a1a;
  --heading-color: #2c3e50;
  --muted-color: #95a5a6;
  --background-color: #ecf0f1;
  --surface-color: #ffffff;
  --border-color: #d5dadc;
  --border-light-color: #e8ecee;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #2c3e50;
  --focus-color: #95a5a6;
  --primary-hover: #95a5a6;
  --primary-light: #e8ecee;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #e8ecee;
  --focus-ring: #95a5a6;
  --focus-ring-alpha: #95a5a64d;
}
[data-theme="rosegold"] {
  --primary-color: #b76e79;
  --secondary-color: #e5b4a1;
  --accent-color: #f0d0c4;
  --text-color: #1a1a1a;
  --heading-color: #b76e79;
  --muted-color: #9a9590;
  --background-color: #fdf5f6;
  --surface-color: #ffffff;
  --border-color: #ecdfe0;
  --border-light-color: #f5eced;
  --danger-color: #b85450;
  --warning-color: #c9a84c;
  --success-color: #b76e79;
  --focus-color: #e5b4a1;
  --primary-hover: #e5b4a1;
  --primary-light: #f5eced;
  --danger-light: #fef2f2;
  --warning-light: #fffbeb;
  --success-light: #f5eced;
  --focus-ring: #e5b4a1;
  --focus-ring-alpha: #e5b4a14d;
}

/* ---------- Theme Utility Classes ---------- */

/* Backgrounds */
.theme-bg              { background-color: var(--background-color); }
.theme-bg-surface      { background-color: var(--surface-color); }
.theme-bg-primary      { background-color: var(--primary-color); }
.theme-bg-secondary    { background-color: var(--secondary-color); }
.theme-bg-accent       { background-color: var(--accent-color); }
.theme-bg-danger       { background-color: var(--danger-color); }
.theme-bg-warning      { background-color: var(--warning-color); }
.theme-bg-success      { background-color: var(--success-color); }
.theme-bg-success-light { background-color: var(--success-light); }
.theme-bg-danger-light  { background-color: var(--danger-light); }
.theme-bg-warning-light { background-color: var(--warning-light); }
.theme-bg-primary-light { background-color: var(--primary-light); }

/* Text */
.theme-text            { color: var(--text-color); }
.theme-text-heading    { color: var(--heading-color); }
.theme-text-primary    { color: var(--primary-color); }
.theme-text-secondary  { color: var(--secondary-color); }
.theme-text-muted      { color: var(--muted-color); }
.theme-text-danger     { color: var(--danger-color); }
.theme-text-success    { color: var(--success-color); }
.theme-text-warning    { color: var(--warning-color); }
.theme-text-on-primary { color: white; }

/* Borders */
.theme-border          { border-color: var(--border-color); }
.theme-border-light    { border-color: var(--border-light-color); }
.theme-border-primary  { border-color: var(--primary-color); }
.theme-border-danger   { border-color: var(--danger-color); }
.theme-border-success  { border-color: var(--success-color); }
.theme-border-warning  { border-color: var(--warning-color); }

/* Focus */
.theme-focus:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--focus-ring);
}
.theme-focus-within:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--focus-ring);
}

/* Rings (for Tailwind ring utilities compatibility) */
.theme-ring:focus {
  --tw-ring-color: var(--focus-ring);
}

/* Hover */
.theme-hover-primary:hover { color: var(--primary-color); }
.theme-hover-secondary:hover { color: var(--secondary-color); }
.theme-hover-bg-light:hover { background-color: var(--primary-light); }