/* Shared visual language for didiowen.uk and its public subdomains. */

/* Primitive tokens */
:root {
  --dw-forest-950: #10201e;
  --dw-forest-900: #162a27;
  --dw-forest-800: #1c3530;
  --dw-forest-700: #26443d;
  --dw-sand-50: #f5f2e9;
  --dw-sand-200: #d9e6d7;
  --dw-sand-400: #b8c2bb;
  --dw-gold-400: #e5b567;
  --dw-gold-300: #f4d9a1;
  --dw-teal-300: #83c6b2;
  --dw-red-300: #e58f7a;
  --dw-radius-sm: 0.55rem;
  --dw-radius-md: 0.9rem;
  --dw-radius-lg: 1.25rem;
  --dw-space-1: 0.25rem;
  --dw-space-2: 0.5rem;
  --dw-space-3: 0.75rem;
  --dw-space-4: 1rem;
  --dw-space-6: 1.5rem;
  --dw-space-8: 2rem;
  --dw-shadow: 0 1rem 3rem rgb(0 0 0 / 0.18);

  /* Semantic tokens */
  --dw-bg: var(--dw-forest-950);
  --dw-surface: rgb(28 53 48 / 0.78);
  --dw-surface-solid: var(--dw-forest-800);
  --dw-surface-hover: var(--dw-forest-700);
  --dw-text: var(--dw-sand-50);
  --dw-muted: var(--dw-sand-400);
  --dw-accent: var(--dw-gold-400);
  --dw-accent-soft: var(--dw-gold-300);
  --dw-secondary: var(--dw-teal-300);
  --dw-danger: var(--dw-red-300);
  --dw-border: rgb(217 230 215 / 0.17);
  --dw-focus: rgb(229 181 103 / 0.7);

  /* Component tokens */
  --dw-card-bg: var(--dw-surface);
  --dw-card-border: var(--dw-border);
  --dw-card-radius: var(--dw-radius-lg);
  --dw-control-bg: var(--dw-surface-solid);
  --dw-control-border: rgb(217 230 215 / 0.28);
  --dw-control-radius: var(--dw-radius-sm);
}

/* MkDocs Material */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--dw-bg);
  --md-default-fg-color: var(--dw-text);
  --md-default-fg-color--light: var(--dw-muted);
  --md-default-fg-color--lighter: rgb(184 194 187 / 0.72);
  --md-default-fg-color--lightest: var(--dw-border);
  --md-primary-fg-color: var(--dw-forest-900);
  --md-primary-bg-color: var(--dw-text);
  --md-accent-fg-color: var(--dw-accent);
  --md-typeset-a-color: var(--dw-secondary);
  --md-code-bg-color: rgb(22 42 39 / 0.9);
}

body,
body.didiowen-site {
  background:
    radial-gradient(circle at 12% 8%, rgb(229 181 103 / 0.15), transparent 28rem),
    radial-gradient(circle at 90% 88%, rgb(131 198 178 / 0.13), transparent 30rem),
    var(--dw-bg);
}

.md-header,
.md-tabs {
  background: rgb(16 32 30 / 0.94);
  backdrop-filter: blur(18px);
}

.md-main__inner { margin-top: var(--dw-space-8); }
.md-content__inner { max-width: 52rem; }
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 { color: var(--dw-text); letter-spacing: -0.025em; }
.md-typeset h1 { font-weight: 520; }
.md-typeset,
body.didiowen-site { overflow-wrap: anywhere; }
.md-typeset a:hover { color: var(--dw-accent-soft); }
.md-typeset table:not([class]) { border-radius: var(--dw-radius-md); overflow: hidden; }
.md-typeset img { border-radius: var(--dw-radius-md); }

/* Imported standalone HTML pages */
body.didiowen-site {
  --paper: var(--dw-bg);
  --cream: var(--dw-bg);
  --ink: var(--dw-text);
  --deep: var(--dw-forest-950);
  --soft: var(--dw-muted);
  --muted: var(--dw-muted);
  --neutral: var(--dw-muted);
  --rule: var(--dw-border);
  --border: var(--dw-control-border);
  --card: var(--dw-surface-solid);
  --sand: var(--dw-sand-50);
  --paper-shade: var(--dw-forest-900);
  --paper-deep: var(--dw-forest-800);
  --paper-letter: var(--dw-forest-900);
  --ink-soft: var(--dw-muted);
  --ink-faint: var(--dw-muted);
  --accent: var(--dw-accent);
  --gold: var(--dw-accent);
  --teal: var(--dw-secondary);
  --oxblood: var(--dw-accent);
  --crimson: var(--dw-danger);
  --terracotta: var(--dw-accent);
  color: var(--dw-text);
}

.dw-home-link {
  position: fixed;
  z-index: 1000;
  top: var(--dw-space-4);
  left: var(--dw-space-4);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--dw-space-4);
  border: 1px solid var(--dw-control-border);
  border-radius: 999px;
  color: var(--dw-accent-soft);
  background: rgb(16 32 30 / 0.86);
  box-shadow: var(--dw-shadow);
  font: 600 0.75rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  backdrop-filter: blur(14px);
}

.dw-home-link:hover { color: var(--dw-text); border-color: var(--dw-focus); }
.dw-home-link:focus-visible,
body.didiowen-site :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--dw-focus);
  outline-offset: 3px;
}

body.didiowen-site :is(button, input, select) {
  border-color: var(--dw-control-border);
}

body.didiowen-site :is(.day-card, .quiz-card, .option-btn, .romaji-input, .user-modal) {
  border-color: var(--dw-card-border);
  box-shadow: var(--dw-shadow);
}

@media (max-width: 620px) {
  .dw-home-link { position: absolute; top: var(--dw-space-3); left: var(--dw-space-3); }
}

@media print {
  .dw-home-link { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}