@import url("./scrollbars.css");

/*
 * DRACARES shared visual foundation — desktop migration, 2026-10-14.
 * Source: Notion DRACARES Admin, visual decision dated 2026-10-12.
 * Load before page CSS; opt in with class="dracares-ui" on the page shell.
 * Set data-theme="dark" or "light" on <html> using the page's theme controller.
 * This file does not choose/persist a theme, load fonts, or modify business logic.
 * Fonts are supplied by the consuming page; system fonts remain a safe fallback.
 * No mobile page is connected to this file during the desktop migration.
 */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-surface-base: #1A1C1E;
  --color-surface-elevated: #25282A;
  --color-nav-bg: #1E2022;
  --color-input-bg: #1E2022;
  --color-border-wood: #4A3525;
  --color-text-primary: #E6E2DA;
  --color-text-secondary: #787C80;
  --color-border-default: #34383B;
  --color-brand-primary: #D4AF37;
  --color-accent-bronze: #B08D57;

  /* Readable derivatives: the reference secondary/bronze remain palette tokens.
   * Use these foregrounds for small text, never the reference gray on charcoal. */
  --color-text-muted: #A9AAA6;
  --color-text-link: #D4AF37;
  --color-on-brand: #1A1C1E;
  --color-surface-hover: #303437;
  --color-control-border: #787C80;
  --color-success: #9BBB9D;
  --color-warning: #D6B578;
  --color-error: #E09B91;
  --color-info: #A0B6C9;
  --color-success-bg: #29362D;
  --color-warning-bg: #3A3225;
  --color-error-bg: #3B2A29;
  --color-info-bg: #29333C;
  --color-selection-bg: #3A3427;
  --color-shadow: rgb(10 12 14 / 28%);
  --color-highlight: rgb(230 226 218 / 7%);
  --wood-surface: linear-gradient(100deg, #34281F, var(--color-border-wood) 48%, #392A20);
}

[data-theme="light"] {
  color-scheme: light;
  --color-surface-base: #F2EFE9;
  --color-surface-elevated: #E8E4DC;
  --color-nav-bg: #E8E4DC;
  --color-input-bg: #DDD8CF;
  --color-border-wood: #5C4033;
  --color-text-primary: #2A2A2A;
  --color-text-secondary: #6E6A63;
  --color-border-default: #D0CBBF;
  --color-brand-primary: #C5A059;
  --color-accent-bronze: #9E7B47;
  --color-text-muted: #625E57;
  --color-text-link: #705321;
  --color-on-brand: #2A2A2A;
  --color-surface-hover: #DDD8CF;
  --color-control-border: #81796C;
  --color-success: #355C3E;
  --color-warning: #71501C;
  --color-error: #8F3F37;
  --color-info: #385B76;
  --color-success-bg: #DCE6DB;
  --color-warning-bg: #EBDFC7;
  --color-error-bg: #EEDAD5;
  --color-info-bg: #DCE4EA;
  --color-selection-bg: #E3D6BE;
  --color-shadow: rgb(60 44 32 / 14%);
  --color-highlight: rgb(255 250 239 / 55%);
  --wood-surface: linear-gradient(100deg, #493126, var(--color-border-wood) 48%, #72503B);
}

:root {
  --font-family-body: "Tajawal", "Inter", Tahoma, Arial, sans-serif;
  --font-family-latin: "Inter", Arial, sans-serif;
  --font-family-display: "Cinzel", Georgia, serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 4px var(--color-shadow), inset 0 1px var(--color-highlight);
  --shadow-md: 0 6px 16px var(--color-shadow), inset 0 1px var(--color-highlight);
  --shadow-inset: inset 0 1px 3px var(--color-shadow);
  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --motion-easing: ease-out;
}

/* Compatibility aliases for existing admin CSS. Opt-in avoids changing other pages. */
.dracares-ui {
  --bg: var(--color-surface-base);
  --surface: var(--color-surface-elevated);
  --surface2: var(--color-surface-hover);
  --border: var(--color-border-default);
  --accent: var(--color-text-link);
  --accent2: var(--color-accent-bronze);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --info: var(--color-info);
  --font: var(--font-family-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background: var(--color-surface-base);
}
.dracares-ui :where(button, input, select, textarea) { font: inherit; }
.dracares-ui :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-text-link);
  outline-offset: 3px;
}
.dracares-ui ::selection { color: var(--color-text-primary); background: var(--color-selection-bg); }

/* Reusable presentation primitives. Layout and data behavior belong to each product. */
.dracares-ui .dc-panel {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.dracares-ui .dc-panel--raised { box-shadow: var(--shadow-sm); }
.dracares-ui .dc-text-muted { color: var(--color-text-muted); }
.dracares-ui .dc-link { color: var(--color-text-link); text-underline-offset: 3px; }

/* Add only to a principal separator or navigation boundary, never every card. */
.dracares-ui .dc-wood-divider {
  border: 0;
  block-size: var(--space-1);
  background: var(--wood-surface);
  box-shadow: var(--shadow-sm);
}
.dracares-ui .dc-wood-boundary { border-inline-end: 3px solid var(--color-border-wood); }

.dracares-ui .dc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-easing),
    border-color var(--motion-fast) var(--motion-easing);
}
.dracares-ui .dc-button:hover { background: var(--color-surface-hover); }
.dracares-ui .dc-button:active { box-shadow: var(--shadow-inset); }
.dracares-ui .dc-button--primary {
  color: var(--color-on-brand);
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.dracares-ui .dc-button--primary:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-on-brand);
}
.dracares-ui .dc-button--danger { color: var(--color-error); }
.dracares-ui .dc-button:disabled,
.dracares-ui .dc-button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.dracares-ui .dc-button[aria-busy="true"] { cursor: progress; }
/* aria-disabled is visual only; the page must prevent the underlying action. */

.dracares-ui .dc-input {
  box-sizing: border-box;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  background: var(--color-input-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
}
.dracares-ui .dc-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.dracares-ui .dc-input[aria-invalid="true"] { border-color: var(--color-error); }
.dracares-ui .dc-input:disabled { opacity: 0.6; cursor: not-allowed; }
.dracares-ui :where(.dc-checkbox, .dc-slider) { accent-color: var(--color-text-link); }
.dracares-ui .dc-slider { min-block-size: 44px; max-inline-size: 100%; }

/* Use a native checkbox with class dc-switch and an associated visible label. */
.dracares-ui .dc-switch {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  inline-size: 44px;
  block-size: 24px;
  margin: 10px 0;
  vertical-align: middle;
  color: var(--color-text-primary);
  background: var(--color-input-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
  cursor: pointer;
}
.dracares-ui .dc-switch::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  inset-block-start: 3px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.dracares-ui .dc-switch:checked { background: var(--color-brand-primary); border-color: var(--color-on-brand); }
.dracares-ui .dc-switch:checked::before { inset-inline-start: 23px; background: var(--color-on-brand); }
.dracares-ui .dc-switch:disabled { opacity: 0.6; cursor: not-allowed; }

.dracares-ui .dc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-hover);
}
.dracares-ui .dc-badge--success { color: var(--color-success); background: var(--color-success-bg); }
.dracares-ui .dc-badge--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.dracares-ui .dc-badge--error { color: var(--color-error); background: var(--color-error-bg); }
.dracares-ui .dc-badge--info { color: var(--color-info); background: var(--color-info-bg); }

@media (prefers-reduced-motion: reduce) {
  .dracares-ui { --motion-fast: 0ms; --motion-normal: 0ms; }
}
@media (forced-colors: active) {
  .dracares-ui .dc-switch { appearance: auto; }
  .dracares-ui .dc-switch::before { display: none; }
  .dracares-ui :where(.dc-button, .dc-input, .dc-panel) { box-shadow: none; }
}