/**
 * myLogbook design tokens — Zone 0.
 *
 * Everything downstream (Zones 1-5) reads from these custom properties,
 * never hardcoded hex/px values directly. This is the single source of
 * truth for color, spacing, and type scale, in both light and dark mode.
 *
 * Palette: "Workshop Amber" — warm, walnut-toned charcoal in dark mode,
 * warm paper cream in light mode, amber/copper as the signature accent.
 * Chosen to extend (not clash with) the amber code-block treatment that
 * was already loved on the old theme.
 *
 * Default mode is light — dark mode is opt-in via [data-mode="dark"] on
 * <html>, toggled by the toolbar (Zone 1) and persisted in localStorage,
 * same mechanism as the old theme.
 */

:root {
  /* ---- Brand ---- */
  --ml-accent-h: 32; /* amber/copper hue, used for a couple of computed tints below */

  /* ---- Light mode (default) ---- */
  --ml-bg-page: #FAF7F2;         /* warm paper cream */
  --ml-bg-surface: #FFFFFF;      /* cards, panels */
  --ml-bg-surface-raised: #FFFDF9;
  --ml-bg-muted: #F1ECE2;        /* subtle fills, hover states */
  --ml-border: #E7E2D6;
  --ml-border-strong: #D8D0BE;

  --ml-text-primary: #292524;
  --ml-text-secondary: #57534E;
  --ml-text-muted: #8A8378;

  --ml-accent: #C2760C;          /* amber/copper */
  --ml-accent-hover: #A8650A;
  --ml-accent-bg: #FAEEDA;       /* pale amber tint, for badges/highlights */
  --ml-accent-text: #7A4A08;     /* accent text on light tint bg (AA-safe) */
  --ml-on-accent: #FFFFFF;       /* text color for content sitting ON TOP of
                                     a solid --ml-accent background (buttons,
                                     current-page pagination, etc.) */

  --ml-secondary: #6B7A5E;       /* sage, supporting accent */
  --ml-secondary-bg: #EEF1E9;
  --ml-secondary-text: #48532F;

  --ml-danger: #B3441F;
  --ml-danger-bg: #FBEAE2;
  --ml-success: #3F6B4F;
  --ml-success-bg: #E7F1EA;

  --ml-focus-ring: 0 0 0 3px rgba(194, 118, 12, 0.35);
  --ml-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ml-shadow-md: 0 4px 10px -2px rgb(41 37 36 / 0.08), 0 2px 4px -2px rgb(41 37 36 / 0.06);

  /* Code blocks are a deliberate exception to page-mode-following colors —
     same reasoning as forcing LTR direction on code regardless of page
     dir (see assets/css/content.css): code benefits from a consistently
     dark, high-contrast background regardless of light/dark mode, and
     losing that distinct "this is code" signal in light mode was a real
     usability regression, not just a style choice. */
  --ml-code-bg: #17140F;
  --ml-code-text: #F1ECE2;

  /* ---- Type scale (rem, relative to root font-size — respects the
     existing font-size adjuster toolbar feature) ---- */
  --ml-text-xs: 0.75rem;
  --ml-text-sm: 0.875rem;
  --ml-text-base: 1rem;
  --ml-text-lg: 1.125rem;
  --ml-text-xl: 1.25rem;
  --ml-text-2xl: 1.5rem;
  --ml-text-3xl: 1.875rem;
  --ml-text-4xl: 2.25rem;

  --ml-leading-tight: 1.25;
  --ml-leading-snug: 1.375;
  --ml-leading-normal: 1.6;
  --ml-leading-relaxed: 1.7;

  --ml-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --ml-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Arabic-script font options ----
     Scheherazade New is the sitewide default (--ml-font-arabic-default),
     applied automatically via :lang(ar) in base.css — NOT via [dir="rtl"],
     since direction and language are different concerns: the RTL toggle
     mirrors layout for content that may still be English, and forcing an
     Arabic font onto Latin text there would look wrong. The other three
     stay available as manual utility classes for deliberate per-element
     use (e.g. a pull-quote in Amiri inside an otherwise-Tajawal article).
     Priority order per project decision: Scheherazade New, Amiri,
     Tajawal, El Messiri. */
  --ml-font-arabic-default: 'Scheherazade New', 'Amiri', 'Tajawal', 'El Messiri', 'Plus Jakarta Sans', serif;
  --ml-font-arabic-amiri: 'Amiri', 'Scheherazade New', 'Plus Jakarta Sans', serif;
  --ml-font-arabic-tajawal: 'Tajawal', 'El Messiri', 'Plus Jakarta Sans', sans-serif;
  --ml-font-arabic-scheherazade: 'Scheherazade New', 'Amiri', 'Plus Jakarta Sans', serif;
  --ml-font-arabic-elmessiri: 'El Messiri', 'Tajawal', 'Plus Jakarta Sans', sans-serif;

  /* ---- Spacing scale (rem, consistent step used everywhere —
     no ad hoc one-off px values in component CSS) ---- */
  --ml-space-3xs: 0.25rem;
  --ml-space-2xs: 0.375rem;
  --ml-space-xs: 0.5rem;
  --ml-space-sm: 0.75rem;
  --ml-space-md: 1rem;
  --ml-space-lg: 1.5rem;
  --ml-space-xl: 2rem;
  --ml-space-2xl: 3rem;
  --ml-space-3xl: 4rem;

  /* ---- Radius ---- */
  --ml-radius-sm: 0.375rem;
  --ml-radius-md: 0.625rem;
  --ml-radius-lg: 0.875rem;
  --ml-radius-pill: 9999px;

  /* ---- Layout ---- */
  --ml-sidebar-width: 280px;
  --ml-content-max: 1440px;
  --ml-width-percent: 100;   /* unitless 0-100, toolbar width-preset control, see grid.css */
  /* Fixed non-flexible width in .ml-grid: 2 sidebars + 2 gaps + 2 padding.
     The width-preset percentage scales only the flexible content column
     against this floor, so narrowing the page never crushes the sidebars —
     see grid.css max-width. */
  --ml-grid-overhead: calc(var(--ml-sidebar-width) * 2 + var(--ml-space-lg) * 4);
  --ml-toolbar-height: 44px;   /* Zone 1 will consume this for sticky offset math */
  --ml-menubar-height: 40px;   /* Zone 1 mega menu bar */

  /* ---- Motion ---- */
  --ml-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ml-dur-fast: 120ms;
  --ml-dur-base: 200ms;
}

[data-mode="dark"] {
  --ml-bg-page: #1C1917;          /* walnut-toned near-black */
  --ml-bg-surface: #24211E;
  --ml-bg-surface-raised: #2A2622;
  --ml-bg-muted: #302B26;
  --ml-border: #3D372F;
  --ml-border-strong: #4C4436;

  --ml-text-primary: #F5F1E8;
  --ml-text-secondary: #C9C0B0;
  --ml-text-muted: #8F8677;

  --ml-accent: #E8A23D;           /* brighter amber for dark-bg contrast */
  --ml-accent-hover: #F0B25C;
  --ml-accent-bg: #3D2E14;
  --ml-accent-text: #F3C878;
  --ml-on-accent: #1C1917;        /* dark text — the brighter dark-mode accent
                                      fails contrast with white text, unlike
                                      light mode's more saturated/darker accent */

  --ml-secondary: #8FA07E;
  --ml-secondary-bg: #2B3324;
  --ml-secondary-text: #B8C6A9;

  --ml-danger: #E08152;
  --ml-danger-bg: #402318;
  --ml-success: #7FAE8F;
  --ml-success-bg: #223328;

  --ml-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --ml-shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/* Fallback for browsers/contexts where JS hasn't set [data-mode] yet but
   the OS is dark — avoids a flash of light-mode-styled dark preference.
   The toolbar's own toggle (Zone 1) always takes precedence once it runs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --ml-bg-page: #1C1917;
    --ml-bg-surface: #24211E;
    --ml-bg-surface-raised: #2A2622;
    --ml-bg-muted: #302B26;
    --ml-border: #3D372F;
    --ml-border-strong: #4C4436;
    --ml-text-primary: #F5F1E8;
    --ml-text-secondary: #C9C0B0;
    --ml-text-muted: #8F8677;
    --ml-accent: #E8A23D;
    --ml-accent-hover: #F0B25C;
    --ml-accent-bg: #3D2E14;
    --ml-accent-text: #F3C878;
    --ml-secondary: #8FA07E;
    --ml-secondary-bg: #2B3324;
    --ml-secondary-text: #B8C6A9;
    --ml-danger: #E08152;
    --ml-danger-bg: #402318;
    --ml-success: #7FAE8F;
    --ml-success-bg: #223328;
  }
}