/**
 * RockBlocks design tokens.
 *
 * Root attributes (set before first paint by Commons/AppearanceHead):
 *   data-rb-theme   light | dark                      resolved colour mode
 *   data-rb-accent  orange | blue | emerald | teal | purple
 *   data-rb-preset  rockblocks | professional | modern
 *   data-rb-density adaptive | comfortable | compact
 *   data-rb-text    standard | large
 * Without attributes (guest pages) the defaults below apply: light, orange, RockBlocks, adaptive, standard.
 * Screen only: print and PDF documents use their own fixed styles, and @media print resets to light tokens.
 */

/* ---------- Accent palettes: light-mode value (≥4.5:1 on white) and dark-mode value (≥4.5:1 on dark surfaces) ---------- */
:root,
[data-rb-accent="orange"] {
  --rb-accent-l: #C2410C; --rb-accent-l-hover: #9A3412; --rb-accent-l-rgb: 194, 65, 12;
  --rb-accent-d: #FB8F5A; --rb-accent-d-hover: #FDAE84; --rb-accent-d-rgb: 251, 143, 90;
  --rb-brand: #F26B2E;
}
[data-rb-accent="blue"] {
  --rb-accent-l: #1D4ED8; --rb-accent-l-hover: #1E40AF; --rb-accent-l-rgb: 29, 78, 216;
  --rb-accent-d: #7AB0FF; --rb-accent-d-hover: #A5C8FF; --rb-accent-d-rgb: 122, 176, 255;
}
[data-rb-accent="emerald"] {
  --rb-accent-l: #047857; --rb-accent-l-hover: #065F46; --rb-accent-l-rgb: 4, 120, 87;
  --rb-accent-d: #3DD39B; --rb-accent-d-hover: #74E3B9; --rb-accent-d-rgb: 61, 211, 155;
}
[data-rb-accent="teal"] {
  --rb-accent-l: #0F766E; --rb-accent-l-hover: #115E59; --rb-accent-l-rgb: 15, 118, 110;
  --rb-accent-d: #3CCFC2; --rb-accent-d-hover: #7ADFD6; --rb-accent-d-rgb: 60, 207, 194;
}
[data-rb-accent="purple"] {
  --rb-accent-l: #6D28D9; --rb-accent-l-hover: #5B21B6; --rb-accent-l-rgb: 109, 40, 217;
  --rb-accent-d: #B79CFF; --rb-accent-d-hover: #CFBDFF; --rb-accent-d-rgb: 183, 156, 255;
}

/* ---------- Light colour mode ---------- */
:root,
[data-rb-theme="light"] {
  color-scheme: light;
  --rb-bg: #F3F4F6;
  --rb-surface: #FFFFFF;
  --rb-surface-2: #F8F9FA;
  --rb-surface-3: #F1F3F5;
  --rb-input-bg: #FFFFFF;
  --rb-text: #212529;
  --rb-heading: #1F2937;
  --rb-text-secondary: #495057;
  --rb-text-muted: #5F6B76;
  --rb-placeholder: #6C757D;
  --rb-border: #DEE2E6;
  --rb-border-light: #E9ECEF;
  --rb-border-strong: #ADB5BD;
  --rb-hover: #F1F3F5;
  --rb-disabled-bg: #E9ECEF;
  --rb-disabled-text: #6C757D;
  --rb-backdrop: rgba(17, 20, 24, 0.5);

  --rb-primary: var(--rb-accent-l);
  --rb-primary-hover: var(--rb-accent-l-hover);
  --rb-primary-rgb: var(--rb-accent-l-rgb);
  --rb-on-primary: #FFFFFF;

  --rb-success: #198754; --rb-success-rgb: 25, 135, 84; --rb-success-text: #146C43;
  --rb-warning: #B45309; --rb-warning-rgb: 180, 83, 9; --rb-warning-text: #92400E;
  --rb-danger: #DC3545; --rb-danger-rgb: 220, 53, 69; --rb-danger-text: #B02A37;
  --rb-info: #0369A1; --rb-info-rgb: 3, 105, 161; --rb-info-text: #075985;
  --rb-neutral: #6C757D;
  --rb-on-status: #FFFFFF;

  --rb-chart-grid: #E9ECEF;
  --rb-chart-text: #495057;
  --rb-shadow-color: 17, 24, 39;
}

/* ---------- Dark colour mode ---------- */
[data-rb-theme="dark"] {
  color-scheme: dark;
  --rb-bg: #0F1419;
  --rb-surface: #171C22;
  --rb-surface-2: #1D232A;
  --rb-surface-3: #232A32;
  --rb-input-bg: #12171C;
  --rb-text: #E6E9ED;
  --rb-heading: #F3F5F7;
  --rb-text-secondary: #C5CCD3;
  --rb-text-muted: #9AA4AF;
  --rb-placeholder: #8B95A0;
  --rb-border: #2D3540;
  --rb-border-light: #252C35;
  --rb-border-strong: #4A5562;
  --rb-hover: #222931;
  --rb-disabled-bg: #20262D;
  --rb-disabled-text: #7D8792;
  --rb-backdrop: rgba(0, 0, 0, 0.62);

  --rb-primary: var(--rb-accent-d);
  --rb-primary-hover: var(--rb-accent-d-hover);
  --rb-primary-rgb: var(--rb-accent-d-rgb);
  --rb-on-primary: #111418;

  --rb-success: #4ADE80; --rb-success-rgb: 74, 222, 128; --rb-success-text: #4ADE80;
  --rb-warning: #FBBF24; --rb-warning-rgb: 251, 191, 36; --rb-warning-text: #FBBF24;
  --rb-danger: #F87171; --rb-danger-rgb: 248, 113, 113; --rb-danger-text: #F87171;
  --rb-info: #38BDF8; --rb-info-rgb: 56, 189, 248; --rb-info-text: #38BDF8;
  --rb-neutral: #9AA4AF;
  --rb-on-status: #111418;

  --rb-chart-grid: #2D3540;
  --rb-chart-text: #C5CCD3;
  --rb-shadow-color: 0, 0, 0;
}

/* ---------- Derived semantic tokens (shared by both modes) ---------- */
:root {
  --rb-primary-soft: rgba(var(--rb-primary-rgb), 0.12);
  --rb-selected: rgba(var(--rb-primary-rgb), 0.14);
  --rb-focus-ring: 0 0 0 0.2rem rgba(var(--rb-primary-rgb), 0.35);
  --rb-success-soft: rgba(var(--rb-success-rgb), 0.14);
  --rb-warning-soft: rgba(var(--rb-warning-rgb), 0.16);
  --rb-danger-soft: rgba(var(--rb-danger-rgb), 0.14);
  --rb-info-soft: rgba(var(--rb-info-rgb), 0.14);

  --rb-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rb-font-size-root: 100%;
  --rb-motion: 240ms;
  --rb-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Bootstrap 5.2 globals follow the tokens */
  --bs-primary: var(--rb-primary);
  --bs-primary-rgb: var(--rb-primary-rgb);
  --bs-success-rgb: var(--rb-success-rgb);
  --bs-danger-rgb: var(--rb-danger-rgb);
  --bs-warning-rgb: var(--rb-warning-rgb);
  --bs-info-rgb: var(--rb-info-rgb);
  --bs-link-color: var(--rb-primary);
  --bs-link-hover-color: var(--rb-primary-hover);
  --bs-body-bg: var(--rb-bg);
  --bs-body-color: var(--rb-text);
  --bs-border-color: var(--rb-border);
  --bs-border-radius: var(--rb-radius);
  --bs-body-font-family: var(--rb-font-family);
}
/* Bootstrap reads these from the element using them, so re-declare on themed roots too */
[data-rb-theme] {
  --rb-primary-soft: rgba(var(--rb-primary-rgb), 0.12);
  --rb-selected: rgba(var(--rb-primary-rgb), 0.14);
  --rb-focus-ring: 0 0 0 0.2rem rgba(var(--rb-primary-rgb), 0.35);
  --rb-success-soft: rgba(var(--rb-success-rgb), 0.14);
  --rb-warning-soft: rgba(var(--rb-warning-rgb), 0.16);
  --rb-danger-soft: rgba(var(--rb-danger-rgb), 0.14);
  --rb-info-soft: rgba(var(--rb-info-rgb), 0.14);
}

/* ---------- Visual presets ---------- */
:root,
[data-rb-preset="rockblocks"] {
  --rb-radius: 6px;
  --rb-radius-lg: 10px;
  --rb-shadow: 0 1px 2px rgba(var(--rb-shadow-color), 0.07);
  --rb-shadow-lg: 0 12px 32px rgba(var(--rb-shadow-color), 0.18);
  --rb-header-bg: #20262E;
  --rb-header-text: #F3F5F7;
  --rb-header-muted: #B8C0C8;
  --rb-header-border: #20262E;
  --rb-header-accent: var(--rb-accent-d);
  --rb-sidebar-bg: #20262E;
  --rb-sidebar-text: #D7DCE1;
  --rb-sidebar-muted: #98A2AD;
  --rb-sidebar-hover: #2A313A;
  --rb-sidebar-active-bg: rgba(var(--rb-accent-d-rgb), 0.16);
  --rb-sidebar-active-text: var(--rb-accent-d);
  --rb-sidebar-border: #20262E;
  --rb-brand-rule: var(--rb-brand, #F26B2E);
}
[data-rb-theme="dark"][data-rb-preset="rockblocks"],
[data-rb-theme="dark"]:not([data-rb-preset]) {
  --rb-header-bg: #12161B;
  --rb-header-border: #232A32;
  --rb-sidebar-bg: #12161B;
  --rb-sidebar-hover: #1E242B;
  --rb-sidebar-border: #232A32;
}

[data-rb-preset="professional"] {
  --rb-radius: 4px;
  --rb-radius-lg: 6px;
  --rb-shadow: none;
  --rb-shadow-lg: 0 8px 24px rgba(var(--rb-shadow-color), 0.14);
  --rb-header-bg: var(--rb-surface);
  --rb-header-text: var(--rb-heading);
  --rb-header-muted: var(--rb-text-muted);
  --rb-header-border: var(--rb-border);
  --rb-header-accent: var(--rb-primary);
  --rb-sidebar-bg: var(--rb-surface);
  --rb-sidebar-text: var(--rb-text);
  --rb-sidebar-muted: var(--rb-text-muted);
  --rb-sidebar-hover: var(--rb-hover);
  --rb-sidebar-active-bg: var(--rb-primary-soft);
  --rb-sidebar-active-text: var(--rb-primary);
  --rb-sidebar-border: var(--rb-border);
  --rb-brand-rule: transparent;
}

[data-rb-preset="modern"] {
  --rb-radius: 10px;
  --rb-radius-lg: 16px;
  --rb-shadow: 0 2px 6px rgba(var(--rb-shadow-color), 0.08), 0 8px 20px rgba(var(--rb-shadow-color), 0.06);
  --rb-shadow-lg: 0 18px 44px rgba(var(--rb-shadow-color), 0.24);
  --rb-header-bg: var(--rb-surface);
  --rb-header-text: var(--rb-heading);
  --rb-header-muted: var(--rb-text-muted);
  --rb-header-border: transparent;
  --rb-header-accent: var(--rb-primary);
  --rb-sidebar-bg: var(--rb-surface);
  --rb-sidebar-text: var(--rb-text);
  --rb-sidebar-muted: var(--rb-text-muted);
  --rb-sidebar-hover: var(--rb-hover);
  --rb-sidebar-active-bg: var(--rb-primary-soft);
  --rb-sidebar-active-text: var(--rb-primary);
  --rb-sidebar-border: transparent;
  --rb-brand-rule: transparent;
}
[data-rb-theme="light"][data-rb-preset="modern"] { --rb-bg: #EEF1F5; }

/* ---------- Density. Adaptive = comfortable on touch/narrow layouts, compact on wide pointer layouts ---------- */
:root,
[data-rb-density="comfortable"],
[data-rb-density="adaptive"] {
  --rb-control-h: 40px;
  --rb-control-py: 0.5rem;
  --rb-control-px: 0.75rem;
  --rb-btn-h: 40px;
  --rb-btn-sm-h: 34px;
  --rb-cell-py: 0.6rem;
  --rb-cell-px: 0.65rem;
  --rb-card-py: 0.85rem;
  --rb-card-px: 1rem;
  --rb-nav-py: 0.6rem;
  --rb-gap: 1rem;
}
[data-rb-density="compact"] {
  --rb-control-h: 34px;
  --rb-control-py: 0.3rem;
  --rb-control-px: 0.6rem;
  --rb-btn-h: 34px;
  --rb-btn-sm-h: 28px;
  --rb-cell-py: 0.35rem;
  --rb-cell-px: 0.5rem;
  --rb-card-py: 0.5rem;
  --rb-card-px: 0.65rem;
  --rb-nav-py: 0.4rem;
  --rb-gap: 0.65rem;
}
@media (min-width: 1200px) and (pointer: fine) {
  [data-rb-density="adaptive"] {
    --rb-control-h: 34px;
    --rb-control-py: 0.3rem;
    --rb-control-px: 0.6rem;
    --rb-btn-h: 34px;
    --rb-btn-sm-h: 28px;
    --rb-cell-py: 0.35rem;
    --rb-cell-px: 0.5rem;
    --rb-card-py: 0.5rem;
    --rb-card-px: 0.65rem;
    --rb-nav-py: 0.4rem;
    --rb-gap: 0.65rem;
  }
}
/* Touch input never gets targets below 44px, whatever the density */
@media (pointer: coarse) {
  :root, [data-rb-density] {
    --rb-control-h: 44px;
    --rb-btn-h: 44px;
    --rb-btn-sm-h: 40px;
  }
}

/* ---------- Text size (rem based, applies on every layout) ---------- */
[data-rb-text="large"] { --rb-font-size-root: 112.5%; }
html { font-size: var(--rb-font-size-root); }

/* ---------- Print: always the light palette, no screen chrome colours ---------- */
@media print {
  :root, [data-rb-theme] {
    color-scheme: light;
    --rb-bg: #FFFFFF; --rb-surface: #FFFFFF; --rb-surface-2: #F8F9FA; --rb-surface-3: #F1F3F5; --rb-input-bg: #FFFFFF;
    --rb-text: #000000; --rb-heading: #000000; --rb-text-secondary: #333333; --rb-text-muted: #555555; --rb-placeholder: #666666;
    --rb-border: #CCCCCC; --rb-border-light: #DDDDDD; --rb-hover: transparent;
    --rb-primary: var(--rb-accent-l); --rb-primary-hover: var(--rb-accent-l-hover); --rb-primary-rgb: var(--rb-accent-l-rgb); --rb-on-primary: #FFFFFF;
    --rb-success: #198754; --rb-warning: #B45309; --rb-danger: #DC3545; --rb-info: #0369A1;
    --rb-success-text: #146C43; --rb-warning-text: #92400E; --rb-danger-text: #B02A37; --rb-info-text: #075985;
    --rb-shadow: none; --rb-shadow-lg: none; --rb-font-size-root: 100%;
  }
}