/* Resia theme for Scalar. Values come from the portal design tokens
   (resia-portal src/index.css, Figma "Resia Portal"): ash neutrals, clay,
   amber action colour, petrol. Keep in sync when the portal tokens change. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --scalar-font: 'Archivo', system-ui, -apple-system, sans-serif;
  --scalar-font-code: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --scalar-radius: 6px;
  --scalar-radius-lg: 8px;
  --scalar-radius-xl: 12px;
}

.light-mode {
  --scalar-background-1: #fffbf2;
  --scalar-background-2: #f7f0e3;
  --scalar-background-3: #e9ddcb;
  --scalar-background-accent: rgba(224, 141, 46, 0.12);

  --scalar-color-1: #24141a;
  --scalar-color-2: #4e3b39;
  --scalar-color-3: #6b5750;

  --scalar-color-accent: #a25e10;
  --scalar-border-color: #e9ddcb;

  --scalar-button-1: #e08d2e;
  --scalar-button-1-color: #1a1008;
  --scalar-button-1-hover: #cb781c;

  --scalar-color-green: #2e6b4a;
  --scalar-color-red: #9e2320;
  --scalar-color-yellow: #c08a08;
  --scalar-color-orange: #a25e10;
  --scalar-color-blue: #1e4149;
  --scalar-color-purple: #96473f;
}

.dark-mode {
  /* Espresso: the light theme's warm hue carried into the dark, with the red of the portal's ash
     scale removed. Surfaces step by luminance only, so cards and the sidebar separate without
     leaning brown. Amber stays the one accent. */
  --scalar-background-1: #17130f;
  --scalar-background-2: #211b16;
  --scalar-background-3: #2c2520;
  --scalar-background-accent: rgba(224, 141, 46, 0.14);

  --scalar-color-1: #f5efe4;
  --scalar-color-2: #cdc2b3;
  --scalar-color-3: #9a8f82;

  --scalar-color-accent: #f0bc72;
  --scalar-border-color: #4a403a;

  --scalar-button-1: #e08d2e;
  --scalar-button-1-color: #1a1008;
  --scalar-button-1-hover: #eda24a;

  --scalar-color-green: #6cbf8a;
  --scalar-color-red: #e5837a;
  --scalar-color-yellow: #e0b345;
  --scalar-color-orange: #f0bc72;
  --scalar-color-blue: #9fcbd3;
  --scalar-color-purple: #d69a92;
}

.light-mode .sidebar,
.light-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #f7f0e3;
  --scalar-sidebar-color-1: #24141a;
  --scalar-sidebar-color-2: #4e3b39;
  --scalar-sidebar-color-active: #8a4e14;
  --scalar-sidebar-border-color: #e9ddcb;
  --scalar-sidebar-item-hover-color: #24141a;
  --scalar-sidebar-item-hover-background: #e9ddcb;
  --scalar-sidebar-item-active-background: rgba(224, 141, 46, 0.14);
  --scalar-sidebar-search-background: #fffbf2;
  --scalar-sidebar-search-border-color: #d2c2ac;
  --scalar-sidebar-search-color: #6b5750;
}

.dark-mode .sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #1c1712;
  --scalar-sidebar-color-1: #f5efe4;
  --scalar-sidebar-color-2: #cdc2b3;
  --scalar-sidebar-color-active: #f0bc72;
  --scalar-sidebar-border-color: #4a403a;
  --scalar-sidebar-item-hover-color: #f5efe4;
  --scalar-sidebar-item-hover-background: #2c2520;
  --scalar-sidebar-item-active-background: rgba(224, 141, 46, 0.16);
  --scalar-sidebar-search-background: #17130f;
  --scalar-sidebar-search-border-color: #4a403a;
  --scalar-sidebar-search-color: #9a8f82;
}