/* THEME: Office. The default.
 *
 * Borrowed from Microsoft 365, because that is the software the estimator has
 * open on the other monitor. White work area, light gray bars, dark gray text,
 * one blue accent. Nothing invented.
 *
 * Light only. There is no Office dark mode here, so the light/dark toggle does
 * not appear on this theme: app/themes.py says which themes have two modes and
 * the banner reads that.
 *
 * The variable names are the ones the app already used, so app.css did not have
 * to learn a new vocabulary. That is why an accent ramp is called --r1 to --r6
 * rather than something blue: renaming 105 variables across 2,600 lines of CSS
 * would have been a far bigger change than reskinning, with far more to break.
 * --r is "the accent ramp", not "red". See docs/ui-overhaul.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* Segoe UI is on every Windows machine and is what Office actually uses.
     Open Sans is the closest free face for anything without it. */
  --f-display: 'Segoe UI', 'Open Sans', system-ui, -apple-system, sans-serif;
  --f-body: 'Segoe UI', 'Open Sans', system-ui, -apple-system, sans-serif;
  --f-mono: 'Consolas', 'SFMono-Regular', 'Cascadia Mono', monospace;
  --f-hud: 'Consolas', 'SFMono-Regular', 'Cascadia Mono', monospace;

  /* The ramps run 1 = brightest to 6 = darkest, the same direction Amerxica
     uses. A deep position is a FILL that white text sits on, so a theme that
     runs them pale-ward puts white on pale blue in the banner. Found by
     measuring contrast on 2026-08-24, not by looking. */

  /* accent: Office blue #0F6CBD, with a ramp either side of it */
  --r1: #0F6CBD;
  --r2: #115EA3;
  --r3: #0C3B5E;
  --r4: #0F6CBD;
  --r5: #0A2C46;
  --r6: #06202F;
  --rg: rgba(15, 108, 189, .18);
  --rg2: rgba(15, 108, 189, .06);

  /* secondary, for data and quieter state */
  --c1: #0F6CBD;
  --c2: #115EA3;
  --c3: #0C3B5E;
  --c4: #082638;

  /* surfaces: white work area, light gray furniture */
  --bg: #F5F5F5;
  --bg2: #FFFFFF;
  --bg3: #FAF9F8;
  --bg4: #F0F0F0;
  --surface: rgba(0, 0, 0, .02);
  --surface2: rgba(0, 0, 0, .04);

  --tx1: #242424;
  --tx2: #323130;
  --tx3: #424242;
  --tx4: #616161;

  --bd1: #D1D1D1;
  --bd2: #E0E0E0;
  --bd3: #EDEBE9;
  --sh1: 0 4px 8px rgba(0, 0, 0, .10);
  --sh2: 0 1px 2px rgba(0, 0, 0, .08);
  --glow: 0 0 0 2px rgba(15, 108, 189, .30);
  /* The top bar. A flat light gray with the thin blue line the brief allows. */
  --metal: linear-gradient(180deg, #FAF9F8 0%, #F3F2F1 100%);
  --metal-hi: rgba(15, 108, 189, .55);

  /* status. Office's own semantic colors. */
  --alert: #C50F1F;
  --alert-bg: #FDF3F4;
  --warn: #9D5D00;
  --warn-bg: #FFF9F5;
  --ok: #0E700E;
  --ok-bg: #F1FAF1;
  --info: #0F6CBD;
  --info-bg: #EBF3FC;

  --radius: 4px;
  --bd-width: 1px;
  --bevel-hi: transparent;
  --bevel-lo: transparent;

  /* Paper stays white and the tool colors stay recognizable: an estimator who
     has learned that green means calibrating should not relearn it per theme.
     They are darkened here so they read on a white sheet. */
  --paper: #FFFFFF;
  --on-accent: #FFFFFF;
  --on-scrim: #FFFFFF;
  --scrim: rgba(32, 31, 30, .88);
  --scrim-solid: rgba(32, 31, 30, .95);
  --curtain: rgba(0, 0, 0, .40);
  --curtain-soft: rgba(0, 0, 0, .24);
  --logo-shadow: rgba(0, 0, 0, .18);
  /* A light bar, so the logo with its navy lettering is the one that reads. */
  /* The ink that sits on the top bar. A light bar takes the page's own text
     colors, which is what this theme always did. */
  --on-bar: var(--tx1);
  --on-bar-quiet: var(--tx2);
  --logo-light-show: block;
  --logo-dark-show: none;
  --logo-edge: rgba(0, 0, 0, .35);
  --tool-cal: #107C10;
  --tool-cal-bg: rgba(16, 124, 16, .10);
  --tool-site: #0F6CBD;
  --tool-site-bg: rgba(15, 108, 189, .10);
  --tool-hl: #8A6A00;
  --tool-hl-2: #6B5200;
  --tool-hl-bg: rgba(255, 230, 0, .22);
  --tool-hl-bg2: rgba(255, 230, 0, .38);
}