/* ROOM360 — the shared design tokens (colours and type follow the rooms360 Playbook v4). Every other stylesheet reads from these.
   Rules and usage: ROOM360_SIGNATURE.md */
/* rooms360 Playbook v4 (26 Oct 2026). Fonts are self-hosted (SIL OFL 1.1, licences in brand/fonts/):
   Archivo variable for everything set upright, Instrument Serif Italic for the italic accent word.
   The display face is Archivo 700-800 at 75% width; any italic falls on Instrument Serif (never a synthetic italic). */
@font-face { font-family: 'R360 Display'; src: url('/brand/fonts/Archivo-VF.ttf') format('truetype'); font-weight: 700 800; font-stretch: 75%; font-style: normal; font-display: swap; }
@font-face { font-family: 'R360 Display'; src: url('/brand/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 100 900; font-stretch: 75%; font-style: italic; font-display: swap; }
@font-face { font-family: 'R360 Text'; src: url('/brand/fonts/Archivo-VF.ttf') format('truetype'); font-weight: 400 700; font-stretch: 100%; font-style: normal; font-display: swap; }
@font-face { font-family: 'R360 Text'; src: url('/brand/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 100 900; font-stretch: 100%; font-style: italic; font-display: swap; }
/* the accent: Instrument Serif Italic wherever the old design used a script or a decorative serif word */
@font-face { font-family: 'R360 Accent'; src: url('/brand/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'R360 Accent'; src: url('/brand/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Browsers pick a face by width before style, so both faces of a family share one width, and the page asks for 75%:
   the display face renders condensed, the text face clamps the request back to its own 100%. */
html { font-stretch: 75%; }

:root {
  /* v4 colours */
  --r360-vermillon: #ED230D;       /* signal, large headings, actions */
  --r360-bordeaux: #530B16;        /* text and structure, dark grounds */
  --r360-creme: #F4EADA;           /* main ground */
  --r360-beurre: #F3D779;          /* short accent on dark grounds */
  --r360-brique: #B5200F;          /* small links and labels on crème */
  --r360-chrome: #A8A49E;          /* photographic accessory, not body copy */
  /* the older token names now carry the v4 colours, so every stylesheet follows */
  --r360-orange: var(--r360-vermillon);
  --r360-vanilla: var(--r360-creme);
  --r360-atlantic: #6B1420;        /* panels: one step lighter than Bordeaux text */
  --r360-orange-hi: #FF5E49;  --r360-orange-lo: var(--r360-brique);
  --r360-vanilla-hi: #F8F1E5; --r360-vanilla-lo: #E2D3BB;  --r360-paper: #E8DCC6;
  --r360-atlantic-hi: var(--r360-beurre); --r360-atlantic-lo: #3E0710; --r360-ink: var(--r360-bordeaux); --r360-chalk: #F7F0E6;

  /* type */
  --r360-serif: 'R360 Display', 'Arial Narrow', Arial, sans-serif;
  --r360-sans: 'R360 Text', Arial, sans-serif;
  --r360-script: 'R360 Accent', Georgia, serif;
  --r360-label-track: 2.6px;

/* glass */
  --r360-glass: linear-gradient(180deg, rgba(74, 90, 102, 0.86) 0%, rgba(40, 54, 66, 0.92) 100%);
  --r360-glass-rim: rgba(214, 228, 234, 0.48);
  --r360-hot: linear-gradient(180deg, #FF7A3E 0%, #FF5A1F 52%, #F04A10 100%);

  /* motion */
  --r360-ease: cubic-bezier(.2, .8, .2, 1);
  --r360-fast: .35s; --r360-mid: .6s; --r360-slow: 1.2s;
}
/* expressive emphasis: an italic Instrument Serif word inside any heading */
.r360-em, h1 em, h2 em { font-family: var(--r360-script); font-style: italic; font-weight: 400; }