/* Umbrella design tokens (V5). Every color, face, radius and motion value in the app comes from here.
   Four brand colors: signature red, warm tan, deep black, soft white. Charcoal, graphite and warm gray support them.
   Surfaces alternate on purpose: charcoal ground, graphite cards, tan panels for elevated sections, red for the one
   thing on a screen that needs attention. Red is never used as a general background. */
:root {
  /* brand */
  --red: #C8202F; --red-deep: #9E1A26; --red-2: #FF4F62; --tan: #C4AD8C; --black: #0B0B0C; --white: #F4F1EA;
  /* ground and surfaces (dark). Text colours reach 4.5:1 on every surface they sit on, in both themes (S6-M8) */
  --bg: #141415; --surface: #1C1C1E; --surface-2: #242427; --surface-3: #2E2E32; --line: #2C2C30; --line-strong: #3C3C42;
  --ink: var(--white); --muted: #A3A3A9; --muted-2: #66666D; --backdrop: #0B0B0C;
  --red-soft: rgba(200,32,47,.14); --red-tint: rgba(200,32,47,.09); --red-line: rgba(200,32,47,.38);
  --tan-fill: var(--tan); --tan-soft: rgba(196,173,140,.14); --tan-line: rgba(196,173,140,.3);
  /* section surfaces */
  --panel-tan: #2B2519; --panel-tan-2: #3A3222; --panel-tan-ink: #F4EFE4; --panel-tan-muted: #B9AB92; --panel-tan-line: rgba(244,239,228,.12);
  --panel-red: #B41D2B; --panel-red-2: #7E131E; --panel-red-ink: #FFF6F6; --panel-red-muted: rgba(255,246,246,.86); --panel-red-line: rgba(255,255,255,.16);
  --panel-black: #0B0B0C;
  /* semantic: told by label and icon; these only shift tone */
  --ok: var(--white); --ok-soft: rgba(244,241,234,.08); --warn: var(--tan); --warn-soft: var(--tan-soft); --danger: var(--red-2); --danger-soft: var(--red-soft);
  --paper: #1F1F22; --shadow: 0 24px 60px rgba(0,0,0,.55); --shadow-sm: 0 8px 24px rgba(0,0,0,.35);
  /* map */
  --map-ocean: #161617; --map-land: #C4AD8C; --map-border: rgba(196,173,140,.35); --map-label: rgba(244,241,234,.78);
  /* type */
  --font-display: "Chakra Petch", "Bai Jamjuree", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Bai Jamjuree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, Menlo, monospace;
  --font-brand: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  /* shape and motion */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 160ms; --dur-2: 280ms; --dur-3: 420ms;
  --nav-h: 64px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #F4F1EA; --surface: #FBF9F4; --surface-2: #EEEAE1; --surface-3: #E3DDD0; --line: #DED8CC; --line-strong: #C9C2B4;
  --ink: #141415; --muted: #5F5F63; --muted-2: #A3A09A; --backdrop: #E6E1D7;
  --red-2: #B71D2B; --red-soft: #F7E1E3; --red-tint: rgba(200,32,47,.07); --red-line: rgba(200,32,47,.3);
  --tan: #6D5C44; --tan-fill: #9C8462; --tan-soft: rgba(156,132,98,.14); --tan-line: rgba(156,132,98,.3);
  --panel-tan: #E6DBC6; --panel-tan-2: #D9CBAF; --panel-tan-ink: #1A170F; --panel-tan-muted: #60543E; --panel-tan-line: rgba(26,23,15,.12);
  --panel-red: #B41D2B; --panel-red-2: #861521; --panel-red-ink: #FFF6F6; --panel-red-muted: rgba(255,246,246,.86); --panel-red-line: rgba(255,255,255,.16);
  --ok: #141415; --ok-soft: rgba(20,20,21,.06); --warn: #715D42; --warn-soft: rgba(156,132,98,.14); --danger: #A9172B; --danger-soft: #F7E1E3;
  --paper: #FBF9F4; --shadow: 0 24px 60px rgba(30,25,20,.16); --shadow-sm: 0 8px 24px rgba(30,25,20,.1);
  --map-ocean: #E9E4DA; --map-land: #9C8462; --map-border: rgba(90,70,45,.35); --map-label: rgba(20,20,21,.75);
  color-scheme: light;
} }
:root[data-theme="light"] {
  --bg: #F4F1EA; --surface: #FBF9F4; --surface-2: #EEEAE1; --surface-3: #E3DDD0; --line: #DED8CC; --line-strong: #C9C2B4;
  --ink: #141415; --muted: #5F5F63; --muted-2: #A3A09A; --backdrop: #E6E1D7;
  --red-2: #B71D2B; --red-soft: #F7E1E3; --red-tint: rgba(200,32,47,.07); --red-line: rgba(200,32,47,.3);
  --tan: #6D5C44; --tan-fill: #9C8462; --tan-soft: rgba(156,132,98,.14); --tan-line: rgba(156,132,98,.3);
  --panel-tan: #E6DBC6; --panel-tan-2: #D9CBAF; --panel-tan-ink: #1A170F; --panel-tan-muted: #60543E; --panel-tan-line: rgba(26,23,15,.12);
  --panel-red: #B41D2B; --panel-red-2: #861521; --panel-red-ink: #FFF6F6; --panel-red-muted: rgba(255,246,246,.86); --panel-red-line: rgba(255,255,255,.16);
  --ok: #141415; --ok-soft: rgba(20,20,21,.06); --warn: #715D42; --warn-soft: rgba(156,132,98,.14); --danger: #A9172B; --danger-soft: #F7E1E3;
  --paper: #FBF9F4; --shadow: 0 24px 60px rgba(30,25,20,.16); --shadow-sm: 0 8px 24px rgba(30,25,20,.1);
  --map-ocean: #E9E4DA; --map-land: #9C8462; --map-border: rgba(90,70,45,.35); --map-label: rgba(20,20,21,.75);
  color-scheme: light;
}
/* aliases used by older markup; all point at the system above */
:root { --surface2: var(--surface-2); --surface3: var(--surface-3); --red2: var(--red-2); --redsoft: var(--red-soft); --tansoft: var(--tan-soft); --oksoft: var(--ok-soft); --warnsoft: var(--warn-soft); --tandeep: var(--tan);
  --prod: var(--tan); --camera: var(--tan); --light: var(--tan); --post: var(--tan); --sound: var(--tan); --gear: var(--tan); --photo: var(--tan); --beauty: var(--tan); }