/*
 * Alpekin Staff Panel design tokens.
 * Only the twelve official primitives below contain raw color values.
 */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

:root {
  /* Official Alpekin palette. */
  --ivory-bone: #e3d3a7;
  --alpine-green: #5e6c3b;
  --burnt-clay: #8d4f35;
  --oxidized-bronze: #926e33;
  --tree-gold: #c6a14f;
  --dark-soil: #2c2116;
  --cleansing-blue-gray: #a2b1b8;
  --moon-ash: #d8d2ca;
  --sacred-copper: #b76e2d;
  --ritual-fire-glow: #c7513a;
  --deep-moss: #3e4d34;
  --bone-black: #1c1c1c;

  /* Typography. */
  --admin-font-heading: "EB Garamond", serif;
  --admin-font-body: "Lora", serif;
  --admin-weight-regular: 400;
  --admin-weight-medium: 500;
  --admin-weight-semibold: 600;
  --admin-weight-bold: 700;
  --admin-size-xs: 0.75rem;
  --admin-size-sm: 0.875rem;
  --admin-size-body: 0.9375rem;
  --admin-size-lead: 1.0625rem;
  --admin-size-title: clamp(1.75rem, 2vw, 2.25rem);
  --admin-line-tight: 1.2;
  --admin-line-body: 1.55;

  /* Spacing and geometry. */
  --admin-space-1: 0.25rem;
  --admin-space-2: 0.5rem;
  --admin-space-3: 0.75rem;
  --admin-space-4: 1rem;
  --admin-space-5: 1.25rem;
  --admin-space-6: 1.5rem;
  --admin-space-7: 2rem;
  --admin-space-8: 2.5rem;
  --admin-radius-xs: 4px;
  --admin-radius-sm: 8px;
  --admin-radius-md: 12px;
  --admin-radius-pill: 999px;
  --admin-border-width: 1px;
  --admin-control-height: 2.625rem;
  --admin-header-height: 5rem;
  --admin-content-max: 100rem;
  /* Color interpolation would create shades outside the official palette. */
  --admin-transition: 0s;

  /* Django variables resolve through the active semantic theme. */
  --primary: var(--admin-strong-bg);
  --secondary: var(--admin-button-hover-bg);
  --accent: var(--admin-accent-bg);
  --primary-fg: var(--admin-on-strong);
  --body-fg: var(--admin-text);
  --body-bg: var(--admin-surface-canvas);
  --body-quiet-color: var(--admin-text-muted);
  --body-medium-color: var(--admin-text);
  --body-loud-color: var(--admin-heading);
  --header-color: var(--admin-header-fg);
  --header-branding-color: var(--admin-header-fg);
  --header-bg: var(--admin-header-bg);
  --header-link-color: var(--admin-header-fg);
  --breadcrumbs-fg: var(--admin-on-strong-muted);
  --breadcrumbs-link-fg: var(--admin-on-strong);
  --breadcrumbs-bg: var(--admin-strong-bg);
  --link-fg: var(--admin-link);
  --link-hover-color: var(--admin-link-hover);
  --link-selected-fg: var(--sacred-copper);
  --hairline-color: var(--admin-divider);
  --border-color: var(--admin-border);
  --error-fg: var(--ritual-fire-glow);
  --message-debug-bg: var(--admin-info-bg);
  --message-info-bg: var(--admin-info-bg);
  --message-success-bg: var(--admin-success-bg);
  --message-warning-bg: var(--admin-warning-bg);
  --message-error-bg: var(--admin-error-bg);
  --darkened-bg: var(--admin-surface-alt);
  --selected-bg: var(--admin-selected-bg);
  --selected-row: var(--admin-selected-bg);
  --button-fg: var(--admin-button-fg);
  --button-bg: var(--admin-button-bg);
  --button-hover-bg: var(--admin-button-hover-bg);
  --default-button-bg: var(--admin-default-button-bg);
  --default-button-hover-bg: var(--admin-accent-bg);
  --close-button-bg: var(--burnt-clay);
  --close-button-hover-bg: var(--sacred-copper);
  --delete-button-bg: var(--ritual-fire-glow);
  --delete-button-hover-bg: var(--burnt-clay);
  --object-tools-fg: var(--admin-button-fg);
  --object-tools-bg: var(--admin-button-bg);
  --object-tools-hover-bg: var(--admin-button-hover-bg);
  --font-family-primary: var(--admin-font-body);
  --font-family-monospace: var(--admin-font-body);
}

:root,
html[data-theme="light"] {
  --admin-surface-canvas: var(--moon-ash);
  --admin-surface-panel: var(--ivory-bone);
  --admin-surface-alt: var(--ivory-bone);
  --admin-surface-strong: var(--moon-ash);
  --admin-surface-row: var(--ivory-bone);
  --admin-surface-row-alt: var(--ivory-bone);
  --admin-surface-hover: var(--tree-gold);
  --admin-control-bg: var(--moon-ash);
  --admin-control-fg: var(--dark-soil);
  --admin-disabled-bg: var(--cleansing-blue-gray);
  --admin-disabled-fg: var(--deep-moss);
  --admin-text: var(--dark-soil);
  --admin-text-muted: var(--deep-moss);
  --admin-heading: var(--bone-black);
  --admin-link: var(--deep-moss);
  --admin-link-hover: var(--dark-soil);
  --admin-header-bg: var(--dark-soil);
  --admin-header-fg: var(--ivory-bone);
  --admin-strong-bg: var(--deep-moss);
  --admin-on-strong: var(--ivory-bone);
  --admin-on-strong-muted: var(--moon-ash);
  --admin-border: var(--alpine-green);
  --admin-divider: var(--cleansing-blue-gray);
  --admin-hover-bg: var(--tree-gold);
  --admin-hover-fg: var(--dark-soil);
  --admin-selected-bg: var(--tree-gold);
  --admin-selected-fg: var(--dark-soil);
  --admin-accent-bg: var(--tree-gold);
  --admin-accent-fg: var(--dark-soil);
  --admin-button-bg: var(--deep-moss);
  --admin-button-fg: var(--ivory-bone);
  --admin-button-hover-bg: var(--alpine-green);
  --admin-default-button-bg: var(--tree-gold);
  --admin-info-bg: var(--cleansing-blue-gray);
  --admin-success-bg: var(--alpine-green);
  --admin-warning-bg: var(--oxidized-bronze);
  --admin-error-bg: var(--ritual-fire-glow);
  --admin-message-fg: var(--ivory-bone);
  --admin-code-bg: var(--bone-black);
  --admin-code-fg: var(--ivory-bone);
  --admin-overlay-bg: var(--bone-black);
  --admin-shadow-color: var(--moon-ash);
  --admin-editor-media-bg: var(--cleansing-blue-gray);
  color-scheme: light;
}

html[data-theme="dark"] {
  --admin-surface-canvas: var(--bone-black);
  --admin-surface-panel: var(--dark-soil);
  --admin-surface-alt: var(--dark-soil);
  --admin-surface-strong: var(--deep-moss);
  --admin-surface-row: var(--dark-soil);
  --admin-surface-row-alt: var(--dark-soil);
  --admin-surface-hover: var(--deep-moss);
  --admin-control-bg: var(--deep-moss);
  --admin-control-fg: var(--moon-ash);
  --admin-disabled-bg: var(--alpine-green);
  --admin-disabled-fg: var(--moon-ash);
  --admin-text: var(--moon-ash);
  --admin-text-muted: var(--cleansing-blue-gray);
  --admin-heading: var(--ivory-bone);
  --admin-link: var(--tree-gold);
  --admin-link-hover: var(--ivory-bone);
  --admin-header-bg: var(--dark-soil);
  --admin-header-fg: var(--ivory-bone);
  --admin-strong-bg: var(--deep-moss);
  --admin-on-strong: var(--ivory-bone);
  --admin-on-strong-muted: var(--moon-ash);
  --admin-border: var(--alpine-green);
  --admin-divider: var(--deep-moss);
  --admin-hover-bg: var(--deep-moss);
  --admin-hover-fg: var(--ivory-bone);
  --admin-selected-bg: var(--tree-gold);
  --admin-selected-fg: var(--dark-soil);
  --admin-accent-bg: var(--tree-gold);
  --admin-accent-fg: var(--dark-soil);
  --admin-button-bg: var(--deep-moss);
  --admin-button-fg: var(--ivory-bone);
  --admin-button-hover-bg: var(--alpine-green);
  --admin-default-button-bg: var(--tree-gold);
  --admin-info-bg: var(--cleansing-blue-gray);
  --admin-success-bg: var(--alpine-green);
  --admin-warning-bg: var(--oxidized-bronze);
  --admin-error-bg: var(--ritual-fire-glow);
  --admin-message-fg: var(--ivory-bone);
  --admin-code-bg: var(--bone-black);
  --admin-code-fg: var(--ivory-bone);
  --admin-overlay-bg: var(--bone-black);
  --admin-shadow-color: var(--bone-black);
  --admin-editor-media-bg: var(--deep-moss);
  color-scheme: dark;
}

/* Match Django's theme-selector specificity so its defaults cannot win. */
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: var(--admin-strong-bg);
  --secondary: var(--admin-button-hover-bg);
  --accent: var(--admin-accent-bg);
  --primary-fg: var(--admin-on-strong);
  --body-fg: var(--admin-text);
  --body-bg: var(--admin-surface-canvas);
  --body-quiet-color: var(--admin-text-muted);
  --body-medium-color: var(--admin-text);
  --body-loud-color: var(--admin-heading);
  --header-color: var(--admin-header-fg);
  --header-branding-color: var(--admin-header-fg);
  --header-bg: var(--admin-header-bg);
  --header-link-color: var(--admin-header-fg);
  --breadcrumbs-fg: var(--admin-on-strong-muted);
  --breadcrumbs-link-fg: var(--admin-on-strong);
  --breadcrumbs-bg: var(--admin-strong-bg);
  --link-fg: var(--admin-link);
  --link-hover-color: var(--admin-link-hover);
  --link-selected-fg: var(--sacred-copper);
  --hairline-color: var(--admin-divider);
  --border-color: var(--admin-border);
  --error-fg: var(--ritual-fire-glow);
  --message-debug-bg: var(--admin-info-bg);
  --message-info-bg: var(--admin-info-bg);
  --message-success-bg: var(--admin-success-bg);
  --message-warning-bg: var(--admin-warning-bg);
  --message-error-bg: var(--admin-error-bg);
  --darkened-bg: var(--admin-surface-alt);
  --selected-bg: var(--admin-selected-bg);
  --selected-row: var(--admin-selected-bg);
  --button-fg: var(--admin-button-fg);
  --button-bg: var(--admin-button-bg);
  --button-hover-bg: var(--admin-button-hover-bg);
  --default-button-bg: var(--admin-default-button-bg);
  --default-button-hover-bg: var(--admin-accent-bg);
  --close-button-bg: var(--burnt-clay);
  --close-button-hover-bg: var(--sacred-copper);
  --delete-button-bg: var(--ritual-fire-glow);
  --delete-button-hover-bg: var(--burnt-clay);
  --object-tools-fg: var(--admin-button-fg);
  --object-tools-bg: var(--admin-button-bg);
  --object-tools-hover-bg: var(--admin-button-hover-bg);
  --font-family-primary: var(--admin-font-body);
  --font-family-monospace: var(--admin-font-body);
}