/* =========================================================================
   TROSFIE — colors_and_type.css (VENDORED for market.trosfy.com)

   Vendored 2026-07-10 from the "Trosfy Design System" claude.ai/design
   project (colors_and_type.css). Local patches, marked (SITE):
     1. @font-face urls rewritten ./fonts/ → /assets/fonts/ (self-hosted)
     2. External @import for JetBrains Mono removed (self-contained site;
        the mono stack falls back to ui-monospace/Menlo)
   Everything else is verbatim. Re-vendor from the design project rather
   than editing here.

   All tokens are prefixed `--trosfie-*` and component classes `.tr-*`.
   Matte cream + chocolate brown surfaces, gold accent, sage success.
   ========================================================================= */

/* ── Webfonts (Trosfie) — (SITE) self-hosted paths ─────────────────── */
@font-face {
  font-family: 'Saira';
  src: url('/assets/fonts/Saira-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('/assets/fonts/Saira-Variable-Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
/* (SITE) JetBrains Mono @import removed — mono stack falls back locally */

:root {
  /* ── FONTS — Trosfie substitution ─────────────────────────────── */
  --trosfie-font-godwit:   "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --trosfie-font-nonlatin: "Poppins", "NotoSans", "NotoSansJP", -apple-system, sans-serif;
  --trosfie-font-museo:    "Saira", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --trosfie-font-mono:     "JetBrains Mono", ui-monospace, Menlo, monospace;
  --trosfie-font-display:  "Saira", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ── Gold (action) ramp ─────────────────────────────────────────── */
  --trosfie-gold-0:   #FBF4E8;
  --trosfie-gold-50:  #FBF1DC;
  --trosfie-gold-100: #F0DDB5;
  --trosfie-gold-200: #DCC79E;
  --trosfie-gold-300: #D4A574;
  --trosfie-gold-500: #C49150;
  --trosfie-gold-700: #7A5B12;
  --trosfie-gold-800: #4E3629;
  --trosfie-gold-900: #1A0F0A;

  /* ── Sage (success / accent) ramp ───────────────────────────────── */
  --trosfie-sage-0:   #F4F8EC;
  --trosfie-sage-50:  #ECF4D6;
  --trosfie-sage-100: #E1ECCB;
  --trosfie-sage-200: #BFD49C;
  --trosfie-sage-300: #94B670;
  --trosfie-sage-400: #6E9554;
  --trosfie-sage-500: #4F7338;
  --trosfie-sage-700: #345224;
  --trosfie-sage-900: #1A2812;

  /* ── Red (critical / errors) ramp ───────────────────────────────── */
  --trosfie-red-50:  #FEF5FC;
  --trosfie-red-100: #FFDED6;
  --trosfie-red-200: #FA9EB4;
  --trosfie-red-300: #FF4581;
  --trosfie-red-500: #C04A3A;
  --trosfie-red-700: #8B1842;
  --trosfie-red-900: #3E0923;

  /* ── Orange (price / warning) ramp ──────────────────────────────── */
  --trosfie-orange-50:  #FEF9DC;
  --trosfie-orange-100: #FFF1CE;
  --trosfie-orange-200: #FFCF9D;
  --trosfie-orange-500: #FD5D1C;
  --trosfie-orange-600: #D33E09;
  --trosfie-orange-700: #732B06;
  --trosfie-orange-900: #371406;

  /* ── Yellow (highlight) ramp ────────────────────────────────────── */
  --trosfie-yellow-500: #FFC629;
  --trosfie-yellow-700: #D19E05;
  --trosfie-yellow-bright: #FEE050;

  /* ── Brown — cream + chocolate ramp ─────────────────────────────── */
  --trosfie-brown-0:   #FFF8F0;
  --trosfie-brown-25:  #FBF4E8;
  --trosfie-brown-100: #F5E6D3;
  --trosfie-brown-300: #E8D5C4;
  --trosfie-brown-400: #B59A7B;
  --trosfie-brown-500: #7E6442;
  --trosfie-brown-700: #6F4E37;
  --trosfie-brown-800: #3E2723;
  --trosfie-brown-900: #1A0F0A;
  --trosfie-brown-ink: #0D0705;

  /* ── Grape — purple accent ──────────────────────────────────────── */
  --trosfie-grape-500: #993FF3;

  /* ── PRODUCT (vertical) COLORS ──────────────────────────────────── */
  --trosfie-prod-flights:            #30C5F7;
  --trosfie-prod-hotels:             #235D9F;
  --trosfie-prod-trains:             #FCA000;
  --trosfie-prod-financial-services: #073E68;
  --trosfie-prod-airport-transport:  #6DD3CE;
  --trosfie-prod-loyalty-points:     #E1CB37;
  --trosfie-prod-gifts:              #FF474E;
  --trosfie-prod-cars:               #087E8B;
  --trosfie-prod-pulse-data:         #F0298A;
  --trosfie-prod-flight-hotels:      #931682;
  --trosfie-prod-travel-activities:  #FF6D6A;
  --trosfie-prod-insurances:         #3B44AB;
  --trosfie-prod-bus:                #20BF55;
  --trosfie-prod-package:            #794EE6;

  /* ── SEMANTIC ALIASES ───────────────────────────────────────────── */
  --trosfie-text-high:     #3E2723;
  --trosfie-text-subtle:   #7E6442;
  --trosfie-text-muted:    #B59A7B;
  --trosfie-text-on-color: #FFF8F0;
  --trosfie-text-action:   #7A5B12;
  --trosfie-text-price:    #FD5D1C;
  --trosfie-text-highlight:#4F7338;

  --trosfie-surface:         #FFF8F0;
  --trosfie-surface-subtle:  #FBF4E8;
  --trosfie-surface-list:    #FBF1DC;
  --trosfie-surface-hero:    #4E3629;
  --trosfie-surface-active:  #F0DDB5;
  --trosfie-surface-muted:   #F5E6D3;
  --trosfie-surface-warning: #FFF1CE;
  --trosfie-surface-error:   #FFDED6;
  --trosfie-surface-invert:  #1A0F0A;

  --trosfie-border:         #D4B8A0;
  --trosfie-border-subtle:  #F5E6D3;
  --trosfie-border-strong:  #D4B8A0;
  --trosfie-border-focus:   #4F7338;
  --trosfie-border-active:  #D4A574;
  --trosfie-border-error:   #C04A3A;
  --trosfie-border-warning: #FFC629;
  --trosfie-scrim:          rgba(26, 15, 10, 0.60);

  --trosfie-action-primary:         #D4A574;
  --trosfie-on-action:              #3E2723;

  --trosfie-bg-hover:  var(--trosfie-gold-50);
  --trosfie-bg-active: var(--trosfie-gold-100);
  --trosfie-action-primary-hover:   #C49150;
  --trosfie-action-primary-pressed: #C49150;
  --trosfie-action-pay:             #FD5D1C;
  --trosfie-action-pay-hover:       #D33E09;
  --trosfie-action-success:         #4F7338;
  --trosfie-action-critical:        #C04A3A;
  --trosfie-action-warning:         #FFC629;

  /* ── SPACING ────────────────────────────────────────────────────── */
  --trosfie-space-xs:   4px;
  --trosfie-space-sm:   8px;
  --trosfie-space-md:   12px;
  --trosfie-space-lg:   16px;
  --trosfie-space-xl:   24px;
  --trosfie-space-2xl:  32px;
  --trosfie-space-3xl:  40px;
  --trosfie-space-4xl:  48px;
  --trosfie-space-5xl:  64px;
  --trosfie-space-6xl:  72px;
  --trosfie-space-7xl:  96px;
  --trosfie-space-xxs:  4px;
  --trosfie-space-s:    12px;
  --trosfie-space-m:    16px;
  --trosfie-space-l:    24px;

  /* ── RADIUS ─────────────────────────────────────────────────────── */
  --trosfie-radius-xs:   4px;
  --trosfie-radius-sm:   6px;
  --trosfie-radius-md:   10px;
  --trosfie-radius-lg:   20px;
  --trosfie-radius-pill: 999px;
  --trosfie-radius-xl:   24px;

  /* ── ELEVATION ──────────────────────────────────────────────────── */
  --trosfie-elev-1-outline: 1px solid #D4B8A0;
  --trosfie-elev-2-shadow:  0 2px 24px -4px rgba(62, 39, 35, 0.12);
  --trosfie-shadow-1: 0 1px 2px rgba(62, 39, 35, 0.05);
  --trosfie-shadow-2: 0 2px 8px rgba(62, 39, 35, 0.06), 0 1px 2px rgba(62, 39, 35, 0.10);
  --trosfie-shadow-3: 0 8px 24px rgba(62, 39, 35, 0.10), 0 2px 4px rgba(62, 39, 35, 0.05);
  --trosfie-shadow-4: 0 16px 48px rgba(62, 39, 35, 0.13), 0 4px 8px rgba(62, 39, 35, 0.06);

  /* ── MOTION ─────────────────────────────────────────────────────── */
  --trosfie-dur-instant:  100ms;
  --trosfie-dur-quick:    200ms;
  --trosfie-dur-moderate: 400ms;
  --trosfie-dur-extended: 600ms;
  --trosfie-dur-fast: 100ms;
  --trosfie-dur-base: 200ms;
  --trosfie-dur-slow: 400ms;

  --trosfie-ease-in-out:      cubic-bezier(0.42,  0,    0.58, 1);
  --trosfie-ease-out:         cubic-bezier(0,     0,    0.58, 1);
  --trosfie-ease-out-bounce:  cubic-bezier(0.12,  0.4,  0.28, 1.36);
  --trosfie-ease-in-bounce:   cubic-bezier(0.7,  -0.4,  0.8,  0.6);
  --trosfie-ease-spring:      cubic-bezier(0.42,  0,    0.58, 0.1);
  --trosfie-ease-linear:      cubic-bezier(0,     0,    1,    1);
  --trosfie-ease-standard: cubic-bezier(0.42, 0, 0.58, 1);
  --trosfie-ease-accel:    cubic-bezier(0.42, 0, 0.58, 0.1);
  --trosfie-ease-decel:    cubic-bezier(0, 0, 0.58, 1);

  --trosfie-opacity-seethrough: 0.10;
  --trosfie-opacity-washed:     0.40;
  --trosfie-opacity-obscure:    0.60;

  --trosfie-stroke-sm: 1px;
  --trosfie-stroke-md: 1.5px;
  --trosfie-stroke-lg: 3px;

  --trosfie-max-content: 1360px;
  --trosfie-gutter:      280px;
}

/* ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--trosfie-font-godwit);
  color: var(--trosfie-text-high);
  background: var(--trosfie-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--trosfie-text-action); text-decoration: none; }
a:hover { color: var(--trosfie-text-high); }
img { display: block; max-width: 100%; }
hr  { border: 0; border-top: 1px solid var(--trosfie-border-subtle); margin: 0; }

/* ── TYPE ROLES ─────────────────────────────────────────────────────── */
.tr-title-hero    { font-family: var(--trosfie-font-display); font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
.tr-title-huge    { font-family: var(--trosfie-font-display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.012em; }
.tr-title-large   { font-family: var(--trosfie-font-display); font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.008em; }
.tr-title-normal  { font-family: var(--trosfie-font-display); font-weight: 600; font-size: 20px; line-height: 24px; }
.tr-title-small   { font-family: var(--trosfie-font-display); font-weight: 600; font-size: 16px; line-height: 20px; }

.tr-ui-huge       { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 16px; line-height: 20px; }
.tr-ui-large      { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 14px; line-height: 20px; }
.tr-ui-normal     { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 12px; line-height: 16px; }
.tr-ui-small      { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.tr-ui-huge-li, .tr-ui-large-li, .tr-ui-normal-li, .tr-ui-small-li { font-weight: 500; }
.tr-ui-huge-em, .tr-ui-large-em, .tr-ui-normal-em, .tr-ui-small-em { font-weight: 900; }

.tr-p-huge        { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 24px; line-height: 36px; letter-spacing: 0.012em; }
.tr-p-large       { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 18px; line-height: 28px; letter-spacing: 0.012em; }
.tr-p-normal      { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: 0.012em; }
.tr-p-small       { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 12px; line-height: 20px; letter-spacing: 0.012em; }
.tr-p-huge-em, .tr-p-large-em, .tr-p-normal-em, .tr-p-small-em { font-weight: 600; }

.tr-hero    { font-family: var(--trosfie-font-display); font-weight: 700; font-size: 96px; line-height: 100%; letter-spacing: -0.024em; }
.tr-display { font-family: var(--trosfie-font-display); font-weight: 700; font-size: 56px; line-height: 110%; letter-spacing: -0.015em; }
.tr-h1      { font-family: var(--trosfie-font-display); font-weight: 700; font-size: 40px; line-height: 120%; letter-spacing: -0.012em; }

.tr-h2      { font-family: var(--trosfie-font-display); font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.008em; }
.tr-h3      { font-family: var(--trosfie-font-display); font-weight: 600; font-size: 18px; line-height: 28px; letter-spacing: 0.012em; }
.tr-h4      { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.012em; }

.tr-body     { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 15px; line-height: 150%; letter-spacing: 0.012em; }
.tr-body-em  { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 15px; line-height: 150%; letter-spacing: 0.012em; }
.tr-body-lg  { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 16px; line-height: 150%; letter-spacing: 0.012em; }
.tr-body-sm  { font-family: var(--trosfie-font-godwit); font-weight: 400; font-size: 14px; line-height: 150%; letter-spacing: 0.012em; }
.tr-caption  { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 12px; line-height: 150%; letter-spacing: 0.040em; }
.tr-micro    { font-family: var(--trosfie-font-godwit); font-weight: 600; font-size: 10px; line-height: 150%; letter-spacing: 0.060em; text-transform: uppercase; }

h1 { all: unset; display: block; }
h1 { font: 700 40px/120% var(--trosfie-font-display); letter-spacing: -0.012em; color: var(--trosfie-text-high); }
h2 { font: 600 26px/32px var(--trosfie-font-display); letter-spacing: -0.008em; color: var(--trosfie-text-high); margin: 0; }
h3 { font: 600 18px/28px var(--trosfie-font-display); letter-spacing: 0.012em; color: var(--trosfie-text-high); margin: 0; }
h4 { font: 600 16px/24px var(--trosfie-font-godwit); letter-spacing: 0.012em; color: var(--trosfie-text-high); margin: 0; }
p  { font: 400 15px/150% var(--trosfie-font-godwit); letter-spacing: 0.012em; color: var(--trosfie-text-high); margin: 0; }
small { font: 400 14px/150% var(--trosfie-font-godwit); color: var(--trosfie-text-subtle); }
code, pre, kbd { font-family: var(--trosfie-font-mono); font-size: 13px; }

.tr-godwit-mark {
  color: var(--trosfie-text-action);
  font-style: normal;
  position: relative;
  display: inline-block;
}
.tr-godwit-mark::after {
  content: "✦";
  position: absolute;
  right: -0.55em;
  top: -0.05em;
  font-size: 0.42em;
  color: var(--trosfie-action-primary);
}
[data-theme='dark'] .tr-godwit-mark::after { color: var(--trosfie-action-success); }

/* ── LAYOUT UTILITIES ───────────────────────────────────────────────── */
.tr-stack { display: flex; flex-direction: column; }
.tr-row   { display: flex; flex-direction: row;    align-items: center; }
.tr-row-start { display: flex; flex-direction: row; align-items: flex-start; }
.tr-grow  { flex: 1; }
.tr-center { display: flex; align-items: center; justify-content: center; }
.tr-gap-xxs { gap: 4px; } .tr-gap-xs { gap: 8px; } .tr-gap-s { gap: 12px; }
.tr-gap-m { gap: 16px; }  .tr-gap-l { gap: 24px; } .tr-gap-xl { gap: 32px; }
.tr-container { max-width: var(--trosfie-max-content); margin: 0 auto; padding: 0 32px; }

/* ── BUTTON ─────────────────────────────────────────────────────────── */
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--trosfie-radius-pill);
  background: var(--trosfie-action-primary);
  color: var(--trosfie-text-high);
  font: 600 16px/1 var(--trosfie-font-godwit);
  letter-spacing: 0.012em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--trosfie-dur-quick) var(--trosfie-ease-in-out),
              border-color var(--trosfie-dur-quick) var(--trosfie-ease-in-out),
              box-shadow var(--trosfie-dur-quick) var(--trosfie-ease-in-out),
              color var(--trosfie-dur-quick) var(--trosfie-ease-in-out);
  outline: none;
}
.tr-btn:focus-visible { box-shadow: 0 0 0 3px var(--trosfie-border-focus); }

.tr-btn--normal { height: 32px; padding: 0 12px; font-size: 14px; }
.tr-btn--inset  { height: 24px; padding: 0 8px;  font-size: 12px; }
.tr-btn--sm     { height: 32px; padding: 0 12px; font-size: 14px; }
.tr-btn--md     { height: 40px; padding: 0 14px; font-size: 15px; }
.tr-btn--stretch { width: 100%; }

.tr-btn--primary        { background: var(--trosfie-action-primary); color: var(--trosfie-text-high); }
.tr-btn--primary:hover  { background: var(--trosfie-action-primary-hover); }
.tr-btn--primary:active { background: var(--trosfie-gold-700); color: var(--trosfie-text-on-color); }

.tr-btn--secondary {
  background: var(--trosfie-surface);
  color: var(--trosfie-text-action);
  border: 1px solid var(--trosfie-action-primary);
}
.tr-btn--secondary:hover  { background: var(--trosfie-bg-hover); border-color: var(--trosfie-gold-500); }
.tr-btn--secondary:active { background: var(--trosfie-bg-active); border-color: var(--trosfie-gold-500); }

.tr-btn--pay        { background: var(--trosfie-action-pay); color: #fff; }
.tr-btn--pay:hover  { background: var(--trosfie-action-pay-hover); }
.tr-btn--pay:active { background: var(--trosfie-orange-700); }

.tr-btn--ghost {
  background: transparent;
  color: var(--trosfie-text-action);
}
.tr-btn--ghost:hover  { background: var(--trosfie-bg-hover); }
.tr-btn--ghost:active { background: var(--trosfie-bg-active); }

.tr-btn:disabled,
.tr-btn[aria-disabled="true"] {
  background: var(--trosfie-surface-muted) !important;
  color: var(--trosfie-text-muted) !important;
  border: 0 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.tr-btn--icon-only { width: 48px; padding: 0; }
.tr-btn--icon-only.tr-btn--sm, .tr-btn--icon-only.tr-btn--normal { width: 32px; }
.tr-btn--icon-only.tr-btn--inset { width: 24px; }
.tr-btn--icon-only.tr-btn--md    { width: 40px; }

/* ── INPUT ──────────────────────────────────────────────────────────── */
.tr-field { display: flex; flex-direction: column; gap: 6px; }
.tr-label {
  font: 600 12px/16px var(--trosfie-font-godwit);
  letter-spacing: 0.040em;
  color: var(--trosfie-text-subtle);
}
.tr-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--trosfie-border);
  border-radius: var(--trosfie-radius-md);
  background: var(--trosfie-surface);
  color: var(--trosfie-text-high);
  font: 500 15px/150% var(--trosfie-font-godwit);
  letter-spacing: 0.012em;
  transition: border-color var(--trosfie-dur-quick) var(--trosfie-ease-in-out),
              box-shadow   var(--trosfie-dur-quick) var(--trosfie-ease-in-out);
  outline: none;
}
.tr-input::placeholder { color: var(--trosfie-text-muted); font-weight: 400; }
.tr-input:hover { border-color: var(--trosfie-border-strong); }
.tr-input:focus { border-color: var(--trosfie-action-primary); box-shadow: 0 0 0 3px var(--trosfie-gold-100); }
.tr-input:disabled { background: var(--trosfie-surface-muted); color: var(--trosfie-text-muted); cursor: not-allowed; }
.tr-input--error { border-color: var(--trosfie-action-critical); }
.tr-input--error:focus { box-shadow: 0 0 0 3px var(--trosfie-red-100); }
.tr-help  { font: 400 12px/150% var(--trosfie-font-godwit); color: var(--trosfie-text-subtle); letter-spacing: 0.012em; }
.tr-help--error { color: var(--trosfie-action-critical); }

textarea.tr-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }

.tr-input-wrap { position: relative; display: flex; align-items: center; }
.tr-input-wrap .tr-input { padding-left: 44px; flex: 1; }
.tr-input-wrap > svg, .tr-input-wrap > .tr-input-icon {
  position: absolute; left: 14px; color: var(--trosfie-text-muted); pointer-events: none;
  width: 20px; height: 20px;
}

/* ── CARD ───────────────────────────────────────────────────────────── */
.tr-card {
  background: var(--trosfie-surface);
  border: 1px solid var(--trosfie-border-subtle);
  border-radius: var(--trosfie-radius-lg);
  padding: 24px;
}
.tr-card--compact { border-radius: var(--trosfie-radius-md); }
.tr-card--rest  { box-shadow: none; }
.tr-card--box   { box-shadow: none; border: var(--trosfie-elev-1-outline); }
.tr-card--float { box-shadow: var(--trosfie-elev-2-shadow); border: 0; overflow: hidden; }
.tr-card--flat   { box-shadow: none; }
.tr-card--raised { box-shadow: var(--trosfie-shadow-3); }

/* ── BADGE ──────────────────────────────────────────────────────────── */
.tr-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--trosfie-radius-xs);
  font: 700 12px/14px var(--trosfie-font-godwit);
  letter-spacing: 0.012em;
  white-space: nowrap;
}
.tr-badge--new    { background: var(--trosfie-sage-400); color: var(--trosfie-sage-900); }
.tr-badge--green  { background: var(--trosfie-sage-200); color: var(--trosfie-sage-700); }
.tr-badge--blue   { background: var(--trosfie-gold-100);  color: var(--trosfie-gold-700); }
.tr-badge--red    { background: var(--trosfie-red-100);   color: var(--trosfie-red-700); }
.tr-badge--yellow { background: var(--trosfie-orange-100); color: var(--trosfie-orange-700); }
.tr-badge--grey   { background: var(--trosfie-surface-muted); color: var(--trosfie-text-high); }
.tr-badge--info     { background: var(--trosfie-gold-100);  color: var(--trosfie-gold-700); }
.tr-badge--success  { background: var(--trosfie-sage-200); color: var(--trosfie-sage-700); }
.tr-badge--warning  { background: var(--trosfie-orange-100); color: var(--trosfie-orange-700); }
.tr-badge--critical { background: var(--trosfie-red-100);   color: var(--trosfie-red-700); }
.tr-badge--neutral  { background: var(--trosfie-surface-muted); color: var(--trosfie-text-high); }
.tr-badge--accent   { background: var(--trosfie-sage-400); color: var(--trosfie-sage-900); }

/* ── CALLOUT ────────────────────────────────────────────────────────── */
.tr-callout {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--trosfie-radius-md);
  border: 1px solid;
  font: 500 14px/150% var(--trosfie-font-godwit);
  letter-spacing: 0.012em;
  position: relative;
}
.tr-callout--grey     { background: var(--trosfie-surface);     color: var(--trosfie-text-high);    border-color: var(--trosfie-border); }
.tr-callout--yellow   { background: var(--trosfie-orange-50);   color: var(--trosfie-orange-700);   border-color: var(--trosfie-orange-100); }
.tr-callout--green    { background: var(--trosfie-sage-100);   color: var(--trosfie-sage-700);    border-color: var(--trosfie-sage-200); }
.tr-callout--red      { background: var(--trosfie-red-50);      color: var(--trosfie-red-700);      border-color: var(--trosfie-red-100); }
.tr-callout--blue     { background: var(--trosfie-gold-50);     color: var(--trosfie-gold-700);     border-color: var(--trosfie-gold-100); }
.tr-callout--contrast { background: var(--trosfie-gold-800);    color: var(--trosfie-text-on-color); border-color: var(--trosfie-gold-800); }
.tr-callout--info     { background: var(--trosfie-gold-50);     color: var(--trosfie-gold-700);     border-color: var(--trosfie-gold-100); }
.tr-callout--success  { background: var(--trosfie-sage-100);   color: var(--trosfie-sage-700);    border-color: var(--trosfie-sage-200); }
.tr-callout--warning  { background: var(--trosfie-orange-50);   color: var(--trosfie-orange-700);   border-color: var(--trosfie-orange-100); }
.tr-callout--critical { background: var(--trosfie-red-50);      color: var(--trosfie-red-700);      border-color: var(--trosfie-red-100); }
.tr-callout__title { font: 700 14px/20px var(--trosfie-font-godwit); margin-bottom: 2px; }
.tr-callout__icon  { flex: none; }
.tr-callout__body  { flex: 1; }

/* ── TABS ───────────────────────────────────────────────────────────── */
.tr-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--trosfie-border-subtle); }
.tr-tab  {
  padding: 12px 0; background: none; border: 0; cursor: pointer;
  font: 600 15px/1 var(--trosfie-font-godwit); color: var(--trosfie-text-subtle);
  border-bottom: 2px solid transparent; transition: color var(--trosfie-dur-quick), border-color var(--trosfie-dur-quick);
}
.tr-tab:hover { color: var(--trosfie-text-high); }
.tr-tab--active { color: var(--trosfie-text-action); border-bottom-color: var(--trosfie-action-primary); }

/* ── NAV ────────────────────────────────────────────────────────────── */
.tr-app-bar {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  background: var(--trosfie-surface);
  border-bottom: 1px solid var(--trosfie-border-subtle);
}
.tr-app-bar__title { font: 700 18px/24px var(--trosfie-font-display); flex: 1; }

/* ── DARK MODE ──────────────────────────────────────────────────────── */
[data-theme='dark'] {
  --trosfie-surface:         #1A0F0A;
  --trosfie-surface-subtle:  #2C1810;
  --trosfie-surface-list:    #2C1810;
  --trosfie-surface-active:  #3E2723;
  --trosfie-surface-muted:   #2C1810;
  --trosfie-surface-warning: #3E2A0A;
  --trosfie-surface-error:   #4A1408;
  --trosfie-surface-invert:  #FFF8F0;
  --trosfie-surface-hero:    #D4A574;

  --trosfie-text-high:       #FFFEF9;
  --trosfie-text-subtle:     #D7CCC8;
  --trosfie-text-muted:      #A1887F;
  --trosfie-text-on-color:   #1A0F0A;
  --trosfie-text-action:     #D4A574;
  --trosfie-text-highlight:  #98D98E;

  --trosfie-border:          #4E3629;
  --trosfie-border-subtle:   #2C1810;
  --trosfie-border-strong:   #6F4E37;
  --trosfie-border-focus:    #98D98E;
  --trosfie-border-active:   #D4A574;
  --trosfie-border-error:    #E67364;

  --trosfie-action-primary:         #D4A574;
  --trosfie-on-action:              #1A0F0A;
  --trosfie-bg-hover:               rgba(255, 254, 249, 0.06);
  --trosfie-bg-active:              rgba(255, 254, 249, 0.10);

  --trosfie-scrim: rgba(0, 0, 0, 0.70);

  --trosfie-elev-1-outline: 1px solid #4E3629;
  --trosfie-elev-2-shadow:  0 2px 24px -4px rgba(0, 0, 0, 0.50);
  --trosfie-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --trosfie-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.40);
  --trosfie-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
  --trosfie-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.25);

  background: var(--trosfie-surface);
  color: var(--trosfie-text-high);
}
[data-theme='dark'] body { background: var(--trosfie-surface); color: var(--trosfie-text-high); }

.tr-btn--primary { color: var(--trosfie-on-action); }