/* Sandstone — a built-in design (skin) for the `whitelabel` theme.
 *
 * Loaded *after* whitelabel.css, it only overrides the design tokens (and adds
 * a couple of component touches). Dark mode is inherited from whitelabel.css:
 * we just supply the `--*--dark` companion values and the shared activation
 * wiring re-points the live tokens for us.
 *
 * Migration: apps that used `theme="sandstone"` should switch to
 *   FlaskConstructUI(theme="whitelabel", design="sandstone", dark_mode="auto")
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --fcu-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fcu-border-radius: 4px;

  /* Warm amber primary (derived shades follow hue/sat/light). */
  --fcu-primary-hue: 30;
  --fcu-primary-sat: 100%;
  --fcu-primary-light: 34%;
  --fcu-on-primary: #ffffff;

  --fcu-secondary: #5f5e5e;
  --fcu-secondary-hover: #474747;

  /* Light "desert workshop" surfaces. */
  --fcu-bg: #f5f2ed;
  --fcu-surface: #ffffff;
  --fcu-surface-alt: #ebe7e0;
  --fcu-text: #1c1c19;
  --fcu-text-muted: #78716c;
  --fcu-border: #e2dcd1;
  --fcu-shadow: 0 4px 6px -1px rgb(60 40 20 / 0.06), 0 2px 4px -2px rgb(60 40 20 / 0.06);

  /* Dark companions (consumed by whitelabel's dark-mode activation blocks). */
  --fcu-primary-light--dark: 72%;
  --fcu-on-primary--dark: #4a2800;
  --fcu-bg--dark: #14130f;
  --fcu-surface--dark: #1c1b17;
  --fcu-surface-alt--dark: #262320;
  --fcu-text--dark: #e9e3d6;
  --fcu-text-muted--dark: #b3a896;
  --fcu-border--dark: #3a352d;
  --fcu-shadow--dark: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
}

/* Component touches that make the skin read as "sandstone" rather than just a
   recoloured whitelabel. */
.fcu-navbar__brand {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

/* Sidebar active item: amber text + accent bar instead of a solid fill. */
.fcu-menu-link.active,
.fcu-submenu-link.active {
  background-color: var(--fcu-surface-alt);
  color: var(--fcu-primary);
  border-right: 3px solid var(--fcu-primary);
  border-radius: 0;
  font-weight: 700;
}

/* Calendars: lean into the typographic personality. The month title takes the
   same uppercase, wide-tracked, heavy Manrope treatment as the brand, and the
   header carries the amber accent bar used elsewhere in the skin. Weekday
   headings echo the title in miniature. */
.fcu-calendar-header {
  border-bottom: 3px solid var(--fcu-primary);
}
.fcu-calendar-header h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.fcu-calendar-table th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fcu-font-size-sm);
  font-weight: 700;
  color: var(--fcu-text-muted);
}
.fcu-calendar-mini-marker {
  width: 5px;
  height: 5px;
}