/* Photo Album — 4-quadrant token tables (silk re-skin, spec T002 §1.2).
   CSS variables only: theme never touches photo pixels (no filters, ever).
   Every quadrant defines the same 21 properties (mechanical rewrite contract).
   :root fallbacks live in foundation.css (loaded first). */

:root {
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

html[data-theme="vintage"][data-mode="light"] {
  --background: #f5f0e8;  --card: #fbf8f2;  --foreground: #2c1810;
  --primary-cta: #8b7355; --primary-cta-text: #f5f0e8;
  --secondary-cta: var(--card); --secondary-cta-text: var(--foreground);
  --accent: #7a6a52;
  --background-accent: color-mix(in srgb, var(--primary-cta) 8%, var(--background));
  --frame: #fffaf0;
  --frame-text: #2c1810;   /* ink for text ON the frame surface */
  --frame-hairline: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  --frame-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent),
                  0 3px 8px -1px color-mix(in srgb, var(--foreground) 7%, transparent),
                  0 10px 20px -6px color-mix(in srgb, var(--foreground) 7%, transparent),
                  0 28px 56px -14px color-mix(in srgb, var(--foreground) 9%, transparent);
  --spine: 1px dashed color-mix(in srgb, var(--foreground) 45%, transparent);
  --node: var(--primary-cta);
  --node-glow: 0 0 10px color-mix(in srgb, var(--primary-cta) 35%, transparent);
  --chip-bg: color-mix(in srgb, var(--primary-cta) 12%, transparent);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-accent: "Caveat", "Segoe Script", cursive;
  --radius: 1rem; --grain: 0.04;
}

html[data-theme="vintage"][data-mode="dark"] {
  --background: #0f1010;  --card: #1a1713;  --foreground: #f0e9dd;
  --primary-cta: #d4b896; --primary-cta-text: #0f1010;
  --secondary-cta: var(--card); --secondary-cta-text: var(--foreground);
  --accent: #9d8a6c;
  --background-accent: color-mix(in srgb, var(--primary-cta) 8%, var(--background));
  --frame: #efe5d2;
  --frame-text: #2c1810;   /* frame stays cream in dark — text on it must stay ink, not --foreground */
  --frame-hairline: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  --frame-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 10px -2px rgba(0,0,0,.5),
                  0 12px 24px -8px rgba(0,0,0,.55), 0 32px 64px -16px rgba(0,0,0,.6);
  --spine: 1px dashed color-mix(in srgb, var(--foreground) 40%, transparent);
  --node: var(--primary-cta);
  --node-glow: 0 0 12px color-mix(in srgb, var(--primary-cta) 45%, transparent);
  --chip-bg: color-mix(in srgb, var(--primary-cta) 14%, transparent);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-accent: "Caveat", "Segoe Script", cursive;
  --radius: 1rem; --grain: 0.05;
}

html[data-theme="modern"][data-mode="light"] {
  --background: #fafafa;  --card: #ffffff;  --foreground: #17171c;
  --primary-cta: #0d9488; --primary-cta-text: #ffffff;
  --secondary-cta: var(--card); --secondary-cta-text: var(--foreground);
  --accent: #6b6b76;
  --background-accent: color-mix(in srgb, var(--primary-cta) 8%, var(--background));
  --frame: #ffffff;
  --frame-text: #17171c;
  --frame-hairline: 1px solid rgba(23,23,28,.08);
  --frame-shadow: 0 1px 2px rgba(23,23,28,.05), 0 3px 8px -1px rgba(23,23,28,.06),
                  0 10px 20px -6px rgba(23,23,28,.07), 0 28px 56px -14px rgba(23,23,28,.09);
  --spine: 2px solid #e2e2e8;
  --node: var(--primary-cta);
  --node-glow: 0 0 8px 1px rgba(13,148,136,.25);
  --chip-bg: color-mix(in srgb, var(--primary-cta) 12%, transparent);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-accent: var(--font-body);
  --radius: 0.25rem; --grain: 0;
}

html[data-theme="modern"][data-mode="dark"] {
  --background: #0e0e11;  --card: #17171c;  --foreground: #f2f2f5;
  --primary-cta: #2fe0c4; --primary-cta-text: #0e0e11;
  --secondary-cta: var(--card); --secondary-cta-text: var(--foreground);
  --accent: #9a9aa6;
  --background-accent: color-mix(in srgb, var(--primary-cta) 8%, var(--background));
  --frame: #17171c;
  --frame-text: #fafafa;
  --frame-hairline: 1px solid rgba(242,242,245,.1);
  --frame-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px -2px rgba(0,0,0,.35),
                  0 12px 24px -8px rgba(0,0,0,.4), 0 32px 64px -16px rgba(0,0,0,.45);
  --spine: 2px solid #3a3a44;
  --node: var(--primary-cta);
  --node-glow: 0 0 10px 1px rgba(47,224,196,.45);
  --chip-bg: color-mix(in srgb, var(--primary-cta) 12%, transparent);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-accent: var(--font-body);
  --radius: 0.25rem; --grain: 0;
}

/* B001 (token-driven): dropdowns keep the UA light control bg in dark mode — text goes dark */
html[data-mode="dark"] select { color: var(--background); }
/* B001 guard: these selects are transparent on dark panels — keep light text in dark mode */
html[data-mode="dark"] .edit-form select,
html[data-mode="dark"] .mod-item form.approve-form select { color: var(--foreground); }

/* Crossfade between moods */
body, header, footer, .card, .chip, .lb-panel, input, select, textarea, button {
  transition: background-color .45s var(--ease-spring), color .45s var(--ease-spring),
              border-color .45s var(--ease-spring);
}

/* Film-grain overlay — fixed, pointer-events none, z-60 (above lightbox 50; curtain z-80 / story z-90 sit above it) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Pill chips (year badges + hashtags): brand-accent wash — was var(--accent) (muted base) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .22em .8em;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--primary-cta);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
}
button.chip {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .25s var(--ease-spring), transform .25s var(--ease-spring);
}
button.chip:hover { background: color-mix(in srgb, var(--primary-cta) 24%, transparent); transform: translateY(-1px); }