/* =============================================================
   ROUNDHOUSE — Color, type, space
   Default is a cool light UI. Dark is opt-in via data-theme="dark".

   PALETTE — each color has one job.

   Neutrals
   --rh-bg / --rh-obsidian     Page. Cool light gray, not sand or paper.
   --rh-surface                Cards and sheets. White.
   --rh-ink / --rh-hero        Type and primary buttons. Charcoal.
   --rh-plate                  Home hero ground. The logo's near-black.
   --rh-stone                  Hero title. Weathered stone from the wordmark.
   --rh-brass-hero             Hero tagline. Brass, only on the dark plate.
   --rh-mark                   The logo's red triangle. Danger text on light,
                               the active-tab mark, and primary emphasis.
   --rh-mark-on-hero           Same red, lifted so it clears AA on the plate.

   Sections — one hue each, used for that section's label, chart, and rule.
   --rh-range     #A3281C  Range. Roundhouse red.
   --rh-gear      #7E5F2F  Gear. Brass dark, so 12px text clears AA on white.
   --rh-supply    #4F6B3A  Supply green.
   --rh-record    #5B3F66  Record plum.
   --rh-service   #B45C0A  Service orange. #C8701E darkened to clear AA.

   Semantic — status, not sections
   --rh-success   #1B6B3A  Ready, clean, verified
   --rh-warn      #8A5A00  Due, low stock
   --rh-danger    #A3281C  Malfunction, delete, error. Roundhouse red.

   All of the above clear WCAG AA (4.5:1) for 12px text on white and on
   the page gray. Fills that use a section color take white text.
   ============================================================= */

/* Webfonts: Big Shoulders Stencil, Oswald, Barlow, JetBrains Mono.
   Latin subsets, SIL OFL. See fonts/OFL-*.txt. Precached with the app. */
@import url('../fonts/fonts.css');

:root {
  /* ---------- NEUTRALS (cool light) ---------- */
  --rh-obsidian:        #FFFFFF;   /* page. White, not bone, so it does not read brown. */
  --rh-obsidian-900:    #FFFFFF;   /* tab bar                               */
  --rh-obsidian-800:    #FFFFFF;   /* card / sheet                          */
  --rh-obsidian-700:    #F3EFE8;   /* inset. Bone, used sparingly.          */
  --rh-obsidian-600:    #E7E2D8;   /* hover                                 */
  --rh-obsidian-500:    #DDD7CC;   /* track / divider                       */
  --rh-obsidian-400:    #C8C2B8;   /* strong divider                        */

  --rh-bone:            #1B1D1F;   /* body. Charcoal.                       */
  --rh-bone-100:        #1B1D1F;   /* headlines                             */
  --rh-bone-300:        #2E3337;   /* secondary. Gunmetal.                  */
  --rh-bone-500:        #2E3337;   /* captions. Gunmetal clears AA on white and bone. */
  --rh-bone-600:        #2E3337;
  --rh-bone-700:        #2E3337;

  /* Brass dark is the contrast-safe brass on white. */
  --rh-brass:           #7E5F2F;
  --rh-brass-600:       #5E4620;
  --rh-brass-400:       #7E5F2F;
  --rh-brass-200:       #B08A4E;
  --rh-brass-tint-08:   rgba(126,95,47,0.08);
  --rh-brass-tint-16:   rgba(126,95,47,0.14);
  --rh-brass-tint-32:   rgba(126,95,47,0.28);

  --rh-dusty-red:       #A3281C;
  --rh-red-700:         #7A1C14;
  --rh-red-400:         #C8402C;
  --rh-red-tint-12:     rgba(163,40,28,0.10);
  --rh-red-tint-24:     rgba(163,40,28,0.20);

  --rh-steel:           #6E747A;
  --rh-steel-400:       #2E3337;
  --rh-steel-200:       #1B1D1F;
  --rh-steel-tint-12:   rgba(110,116,122,0.12);
  --rh-steel-tint-24:   rgba(110,116,122,0.24);

  /* ---------- SECTIONS ---------- */
  --rh-range:           #A3281C;   /* Roundhouse red                        */
  --rh-gear:            #7E5F2F;   /* Brass dark, AA on white               */
  --rh-supply:          #4F6B3A;
  --rh-record:          #5B3F66;
  --rh-service:         #B45C0A;   /* #C8701E darkened to clear AA          */
  --rh-hero:            #1B1D1F;
  --rh-plate:           #1B1D1F;
  --rh-stone:           #CFC6B8;
  --rh-stone-shadow:    #8E8679;
  --rh-brass-hero:      #D4B072;   /* Brass light, AA on the plate          */
  --rh-mark:            #A3281C;
  --rh-mark-on-hero:    #E05844;   /* #C8402C lifted so 12px text clears AA */
  --rh-red-on-dark:     #C8402C;
  --rh-on-hero:         #FFFFFF;
  --rh-on-fill:         #FFFFFF;   /* text on a section or mark fill */
  --rh-surface:         #FFFFFF;
  --rh-line:            #D5D8DE;

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg:                 var(--rh-obsidian);
  --bg-elevated-1:      var(--rh-obsidian-800);
  --bg-elevated-2:      var(--rh-obsidian-700);
  --bg-hover:           var(--rh-obsidian-600);
  --bg-pressed:         var(--rh-obsidian-500);
  --bg-inverse:         var(--rh-bone);

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg-1:               var(--rh-bone-100);   /* headlines             */
  --fg-2:               var(--rh-bone);       /* body                  */
  --fg-3:               var(--rh-bone-300);   /* secondary             */
  --fg-4:               var(--rh-bone-500);   /* metadata / captions   */
  --fg-muted:           var(--rh-bone-700);
  --fg-on-brass:        var(--rh-on-accent);
  --fg-on-red:          var(--rh-on-red);

  /* ---------- SEMANTIC: BORDERS / DIVIDERS ---------- */
  --border-hairline:    rgba(20,23,28,0.10);
  --border-default:     rgba(20,23,28,0.16);
  --border-strong:      rgba(20,23,28,0.28);
  --border-brass:       var(--rh-brass);
  --border-brass-soft:  var(--rh-brass-tint-32);

  /* ---------- SEMANTIC: ACTION / STATUS ---------- */
  --accent:             var(--rh-brass);
  --action:             var(--rh-hero);
  --action-hover:       #2E3337;
  --action-pressed:     #000000;

  --status-ready:       var(--rh-success);
  --status-due:         var(--rh-warn);
  --status-attention:   var(--rh-danger);
  --status-low:         var(--rh-warn);
  --status-verified:    var(--rh-success);
  --status-complete:    var(--rh-success);

  --rh-success:         #1B6B3A;
  --rh-warn:            #8A5A00;
  --rh-danger:          #A3281C;
  --rh-green:           var(--rh-success);
  --rh-amber:           var(--rh-warn);
  --rh-red-soft:        var(--rh-danger);

  --rh-on-accent:       #FFFFFF;
  --rh-on-red:          #FFFFFF;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 2px rgba(20,23,28,0.06);
  --shadow-2: 0 1px 2px rgba(20,23,28,0.06), 0 8px 20px rgba(20,23,28,0.06);
  --shadow-3: 0 12px 32px rgba(20,23,28,0.16);
  --shadow-brass-glow: 0 0 0 1px var(--rh-line);
  --shadow-red-glow:  0 0 0 1px var(--rh-danger);

  /* Crisp corners. Circles stay on the mic and rings only. */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  4px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- SPACING ----------
     --space-3 is the only gap: between sections, and inside a card
     (padding and the space between blocks). --space-4 is the screen inset.
     --space-2 is for a control and its label in the same row.
     --space-1 is inside one graphic (a sparkline and its month letters). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --s-0:  0px;
  --s-1:  var(--space-1);
  --s-2:  var(--space-2);
  --s-3:  var(--space-3);
  --s-4:  var(--space-4);
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-stencil: 'Big Shoulders Stencil', 'Oswald', sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-ui:      'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE ----------
     display  28 / 600  Oswald. The one big number. Stencil holes fight digits.
     stencil  900       Big Shoulders Stencil. Headers, section titles, badges.
     title    20 / 600  Oswald. A named thing (gun, trip, sheet).
     label    12 / 600  Oswald, +0.08em, uppercase. Tabs, buttons, tagline.
     body     15 / 400  Barlow. Sentences. More legible than Oswald at this size.
     caption  12 / 500  Barlow. Times and hints.
     The ROUNDHOUSE wordmark is traced SVG, never this font. */
  --type-display-size: 28px; --type-display-weight: 600; --type-display-lh: 1;
  --type-title-size:   20px; --type-title-weight:   600; --type-title-lh: 1.15;
  --type-label-size:   12px; --type-label-weight:   600; --type-label-lh: 1.2; --type-label-track: 0.08em;
  --type-body-size:    15px; --type-body-weight:    400; --type-body-lh: 1.45;
  --type-caption-size: 12px; --type-caption-weight: 500; --type-caption-lh: 1.35;

  --display-1-size: var(--type-display-size); --display-1-lh: 1; --display-1-tr: 0.02em;
  --display-2-size: var(--type-display-size); --display-2-lh: 1; --display-2-tr: 0.02em;
  --display-3-size: var(--type-display-size); --display-3-lh: 1; --display-3-tr: 0.02em;
  --h1-size: var(--type-display-size); --h1-lh: 1; --h1-tr: 0.02em;
  --h2-size: var(--type-title-size); --h2-lh: 1.15; --h2-tr: 0.02em;
  --h3-size: var(--type-title-size); --h3-lh: 1.15; --h3-tr: 0.02em;
  --h4-size: var(--type-title-size); --h4-lh: 1.15; --h4-tr: 0.02em;
  --label-lg-size: var(--type-label-size); --label-lg-lh: 1.2; --label-lg-tr: var(--type-label-track);
  --label-md-size: var(--type-label-size); --label-md-lh: 1.2; --label-md-tr: var(--type-label-track);
  --label-sm-size: var(--type-label-size); --label-sm-lh: 1.2; --label-sm-tr: var(--type-label-track);
  --body-lg-size: var(--type-body-size); --body-lg-lh: 1.45;
  --body-md-size: var(--type-body-size); --body-md-lh: 1.45;
  --body-sm-size: var(--type-caption-size); --body-sm-lh: 1.35;
  --mono-md-size: var(--type-caption-size); --mono-md-lh: 1.35;
  --mono-sm-size: var(--type-caption-size); --mono-sm-lh: 1.35;
}

/* Light is the default :root above. A saved data-theme="light" must not
   bring back the old warm paper palette. */
:root[data-theme="light"] {}

/* Dark is opt-in. Neutrals invert; section hues lighten so they stay AA on obsidian. */
:root[data-theme="dark"] {
  --rh-obsidian:        #0D0D0F;
  --rh-obsidian-900:    #0A0A0C;
  --rh-obsidian-800:    #111114;
  --rh-obsidian-700:    #16161A;
  --rh-obsidian-600:    #1D1D22;
  --rh-obsidian-500:    #26262C;
  --rh-obsidian-400:    #36363D;
  --rh-bone:            #E6E1D6;
  --rh-bone-100:        #F2EEE5;
  --rh-bone-300:        #C8C3B7;
  --rh-bone-500:        #8E897C;
  --rh-bone-600:        #6E6A5F;
  --rh-bone-700:        #847F73;
  --rh-brass:           #E6E1D6;
  --rh-brass-600:       #C8C3B7;
  --rh-brass-400:       #F2EEE5;
  --rh-brass-200:       #FFFFFF;
  --rh-brass-tint-08:   rgba(242,238,229,0.06);
  --rh-brass-tint-16:   rgba(242,238,229,0.12);
  --rh-brass-tint-32:   rgba(242,238,229,0.22);
  --rh-on-accent:       #14171C;
  --rh-hero:            #000000;
  --rh-plate:           #000000;
  --rh-mark:            #E05844;
  --rh-danger:          #E05844;
  --rh-dusty-red:       #E05844;
  --rh-on-fill:         #1B1D1F;   /* fills lighten in dark; charcoal text keeps AA */
  --rh-surface:         #16161A;
  --rh-line:            rgba(242,238,229,0.16);
  --border-hairline:    rgba(242,238,229,0.08);
  --border-default:     rgba(242,238,229,0.14);
  --border-strong:      rgba(242,238,229,0.24);
  --rh-range:           #E05844;
  --rh-gear:            #D4B072;
  --rh-supply:          #8EAE72;
  --rh-record:          #C4A0D4;
  --rh-service:         #E0A05A;
  --rh-mark:            #E05844;
  --rh-mark-on-hero:    #E05844;
  --rh-brass-hero:      #D4B072;
  --rh-stone:           #CFC6B8;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 8px 20px rgba(0,0,0,0.55);
}

/* =============================================================
   ACCENT WARMTH (Settings → Display → Accent color)
   Re-tunes the brass ramp. Brass is the default (no attribute).
   Applied via <html data-accent="gold|bronze">; the light-theme
   variants are darkened so they keep contrast on paper.
   ============================================================= */
:root[data-accent="gold"] {
  --rh-brass:           #9C7F2E;
  --rh-brass-600:       #6E5820;
  --rh-brass-400:       #82692A;
  --rh-brass-200:       #957A35;
  --rh-brass-tint-08:   rgba(156,127,46,0.10);
  --rh-brass-tint-16:   rgba(156,127,46,0.16);
  --rh-brass-tint-32:   rgba(156,127,46,0.32);
}
:root[data-accent="bronze"] {
  --rh-brass:           #8A6420;
  --rh-brass-600:       #5F4413;
  --rh-brass-400:       #74541A;
  --rh-brass-200:       #86611F;
  --rh-brass-tint-08:   rgba(138,100,32,0.10);
  --rh-brass-tint-16:   rgba(138,100,32,0.16);
  --rh-brass-tint-32:   rgba(138,100,32,0.32);
}
:root[data-theme="dark"][data-accent="gold"] {
  --rh-brass:           #D9B870;
  --rh-brass-600:       #BC9C55;
  --rh-brass-400:       #E4C98C;
  --rh-brass-200:       #EEDCAF;
}
:root[data-theme="dark"][data-accent="bronze"] {
  --rh-brass:           #C4923A;
  --rh-brass-600:       #A07A2A;
  --rh-brass-400:       #D0AE66;
  --rh-brass-200:       #E2C48A;
}

/* =============================================================
   SEMANTIC HTML DEFAULTS
   ============================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Big Shoulders Stencil. */
.rh-display-1, .rh-display-2, .rh-display-3 {
  font-family: var(--font-stencil);
  color: var(--fg-1);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}
.rh-display-1 { font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-tr); }
.rh-display-2 { font-size: var(--display-2-size); line-height: var(--display-2-lh); letter-spacing: var(--display-2-tr); }
.rh-display-3 { font-size: var(--display-3-size); line-height: var(--display-3-lh); letter-spacing: var(--display-3-tr); }

h1, .rh-h1 {
  font-family: var(--font-stencil);
  font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 900; color: var(--fg-1); margin: 0;
}
h2, .rh-h2, h3, .rh-h3, h4, .rh-h4 {
  font-family: var(--font-ui);
  font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: 0.02em;
  text-transform: none; font-weight: var(--type-title-weight); color: var(--fg-1); margin: 0;
}

/* The five roles. */
.t-display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: 0.02em;
  color: var(--fg-1);
}
.t-title {
  font-family: var(--font-ui);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  letter-spacing: 0.02em;
  color: var(--fg-1);
}
.t-label, .label-md, .label-lg, .rh-label-lg, .rh-label-md, .rh-label-sm {
  font-family: var(--font-ui);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-body, p, .rh-body-md, .rh-body-lg {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--fg-1);
}
.t-caption, .rh-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--fg-3);
}
p, .rh-body-md, .rh-body-lg { margin: 0; }

/* Mono / numeric */
code, kbd, samp, .rh-mono {
  font-family: var(--font-mono);
  font-size: var(--mono-md-size);
  line-height: var(--mono-md-lh);
  color: var(--fg-2);
}
.rh-numeric {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--fg-1);
  letter-spacing: 0.02em;
}

/* Links */
a { color: var(--rh-brass-400); text-decoration: none; border-bottom: 1px solid var(--rh-brass-tint-32); transition: color 120ms ease, border-color 120ms ease; }
a:hover { color: var(--rh-brass-200); border-bottom-color: var(--rh-brass-400); }
a:active { color: var(--rh-brass-600); }

/* Selection */
::selection { background: var(--rh-brass-tint-32); color: var(--fg-1); }