@import 'tailwindcss';

/* Class-based dark mode: toggling `.dark` on <html> swaps the token values below. */
@custom-variant dark (&:where(.dark, .dark *));

/* ============================================================================
   THE LIVING CODEX — design tokens. Parchment + gilt (light) · candlelit (dark).
   Every --app-* name components already use is kept; values are swapped and a few
   new tokens added. Retheme the entire accent by changing --app-accent-hue
   (73 gilt · 38 ember · 12 oxblood · 285 arcane · 178 verdigris · 150 forest).
   ============================================================================ */

/* ---- Light: aged parchment ---- */
:root {
  --app-surface:    oklch(0.945 0.018 84);
  --app-surface-2:  oklch(0.915 0.020 82);   /* sunken wells */
  --app-panel:      oklch(0.972 0.013 88);
  --app-panel-2:    oklch(0.955 0.015 86);
  --app-elevated:   oklch(0.900 0.022 80);
  --app-line:       oklch(0.855 0.025 78);
  --app-line-strong:oklch(0.760 0.030 76);
  --app-ink:        oklch(0.280 0.022 64);
  --app-ink-soft:   oklch(0.400 0.020 66);    /* body copy */
  --app-muted:      oklch(0.520 0.020 70);
  --app-faint:      oklch(0.620 0.018 74);     /* tertiary */

  --app-accent:       oklch(0.585 0.098 var(--app-accent-hue));
  --app-accent-deep:  oklch(0.500 0.090 calc(var(--app-accent-hue) - 5));
  --app-accent-soft:  oklch(0.680 0.110 calc(var(--app-accent-hue) + 5));
  --app-accent-ink:   oklch(0.985 0.010 88);
  --app-accent-glow:  oklch(0.585 0.098 var(--app-accent-hue) / 0.16);
  --app-accent-hue:   73;  /* change this ONE number to retheme the accent */

  --app-verdigris:  oklch(0.540 0.058 178);
  --app-danger:     oklch(0.520 0.150 32);
  --app-danger-glow:oklch(0.520 0.150 32 / 0.16);
  --app-success:    oklch(0.560 0.085 150);
  --app-warning:    oklch(0.560 0.110 70);
  --app-info:       oklch(0.500 0.095 285);

  --app-paper-mul: 1; /* set 0 to disable the paper grain */
  --paper-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---- Dark: candlelit ink ---- */
.dark {
  --app-surface:    oklch(0.185 0.012 66);
  --app-surface-2:  oklch(0.150 0.012 66);
  --app-panel:      oklch(0.225 0.014 64);
  --app-panel-2:    oklch(0.255 0.015 62);
  --app-elevated:   oklch(0.290 0.016 60);
  --app-line:       oklch(0.330 0.018 58);
  --app-line-strong:oklch(0.420 0.022 56);
  --app-ink:        oklch(0.925 0.016 82);
  --app-ink-soft:   oklch(0.820 0.016 80);
  --app-muted:      oklch(0.660 0.018 76);
  --app-faint:      oklch(0.520 0.018 72);

  --app-accent:       oklch(0.795 0.115 var(--app-accent-hue));
  --app-accent-deep:  oklch(0.700 0.105 calc(var(--app-accent-hue) - 4));
  --app-accent-soft:  oklch(0.860 0.120 calc(var(--app-accent-hue) + 3));
  --app-accent-ink:   oklch(0.180 0.020 60);
  --app-accent-glow:  oklch(0.795 0.115 var(--app-accent-hue) / 0.18);
  --app-accent-hue:   82;

  --app-verdigris:  oklch(0.700 0.070 178);
  --app-danger:     oklch(0.640 0.155 36);
  --app-danger-glow:oklch(0.640 0.155 36 / 0.20);
  --app-success:    oklch(0.700 0.095 152);
  --app-warning:    oklch(0.780 0.120 75);
  --app-info:       oklch(0.700 0.105 288);

  color-scheme: dark;
}

/* Expose tokens as Tailwind utilities: bg-surface, text-faint, border-line-strong, bg-accent-glow… */
@theme inline {
  --color-surface: var(--app-surface);
  --color-surface-2: var(--app-surface-2);
  --color-panel: var(--app-panel);
  --color-panel-2: var(--app-panel-2);
  --color-elevated: var(--app-elevated);
  --color-line: var(--app-line);
  --color-line-strong: var(--app-line-strong);
  --color-ink: var(--app-ink);
  --color-ink-soft: var(--app-ink-soft);
  --color-muted: var(--app-muted);
  --color-faint: var(--app-faint);
  --color-accent: var(--app-accent);
  --color-accent-deep: var(--app-accent-deep);
  --color-accent-soft: var(--app-accent-soft);
  --color-accent-ink: var(--app-accent-ink);
  --color-accent-glow: var(--app-accent-glow);
  --color-verdigris: var(--app-verdigris);
  --color-danger: var(--app-danger);
  --color-danger-glow: var(--app-danger-glow);
  --color-success: var(--app-success);
  --color-warning: var(--app-warning);
  --color-info: var(--app-info);

  --font-display: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Spline Sans Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--app-surface);
  color: var(--app-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Pressed-paper grain. Put class="paper-grain" on any positioned panel. ---- */
.paper-grain { position: relative; }
.paper-grain::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--paper-url);
  background-size: 240px 240px;
  opacity: calc(0.30 * var(--app-paper-mul));
}
.dark .paper-grain::before { opacity: calc(0.42 * var(--app-paper-mul)); }
.paper-grain > * { position: relative; z-index: 1; }

/* ---- Gilt hairline rule ---- */
.gilt-rule { height: 1px; border: 0; opacity: .5;
  background: linear-gradient(90deg, transparent, var(--app-accent) 18%, var(--app-accent) 82%, transparent); }

/* ---- Small-caps section label ---- */
.smallcaps { font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px; font-weight: 600; color: var(--app-muted); }

/* Reduced-motion friendliness */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Thin themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-line) transparent;
}

/* Print: hide app chrome so a character sheet prints (or saves to PDF) cleanly. */
@media print {
  header,
  [data-roll-tray] {
    display: none !important;
  }
  main {
    overflow: visible !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* Dice roll animations */
@keyframes dice-tumble {
  0% {
    transform: scale(0.7) rotate(-12deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.12) rotate(8deg);
  }
  75% {
    transform: scale(0.96) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.animate-dice-settle {
  animation: dice-tumble 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dice-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, 1px) rotate(-3deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(3deg);
  }
  75% {
    transform: translate(-1px, 2px) rotate(-2deg);
  }
}
.animate-dice-rolling {
  animation: dice-shake 0.12s linear infinite;
}

/* Crit / fumble emphasis on the roll tray */
@keyframes crit-pop {
  0% { transform: scale(0.6) rotate(-10deg); }
  45% { transform: scale(1.2) rotate(5deg); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0deg); }
}
.animate-crit { animation: crit-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes crit-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 60, 0); }
  50% { box-shadow: 0 0 24px 5px rgba(255, 200, 60, 0.8); }
}
.animate-crit-glow { animation: crit-glow 1s ease-in-out 2; }
@keyframes fumble-fall {
  0% { transform: translateY(-5px) rotate(0); }
  20% { transform: translateX(-7px) rotate(-5deg); }
  40% { transform: translateX(6px) rotate(4deg); }
  60% { transform: translateX(-5px) rotate(-3deg); }
  80% { transform: translateX(3px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0); }
}
.animate-fumble { animation: fumble-fall 0.6s ease-in-out; }
