/* =============================================================
   CLIENT DESIGN TOKENS — tokens.css
   Place in: assets/tokens.css
   Dash auto-serves everything in the assets/ folder.
   ============================================================= */


/* -------------------------------------------------------------
   1. FONT FACES
   Files live in: assets/fonts/
   Format: GT-America-Mono-{Weight}-Trial.otf
   If you have additional weights (Thin, Black etc.) add them
   following the same pattern.
   ------------------------------------------------------------- */

@font-face {
  font-family: "GT America Mono";
  src: url("/assets/fonts/GT-America-Mono-Light-Trial.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America Mono";
  src: url("/assets/fonts/GT-America-Mono-Regular-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America Mono";
  src: url("/assets/fonts/GT-America-Mono-Medium-Trial.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America Mono";
  src: url("/assets/fonts/GT-America-Mono-Bold-Trial.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------------
   2. DESIGN TOKENS
   All values reverse-engineered from the client's live site.
   ------------------------------------------------------------- */

:root {

  /* — Fonts — */
  --font-brand:   "GT America Mono", ui-monospace, "Cascadia Code", monospace;
  --font-ui:      Roboto, Arial, sans-serif;

  /* — Type scale (7px base × 1.1 modular ratio) — */
  --text-xs:      12.74px;   /* captions, helper text   */
  --text-sm:      14px;      /* table cells, small UI   */
  --text-base:    16px;      /* body copy               */
  --text-md:      18px;      /* subheadings             */
  --text-lg:      21px;      /* section headings        */
  --text-xl:      28px;      /* display small           */
  --text-2xl:     42px;      /* hero / page title       */

  /* — Font weights — */
  --weight-light:  300;
  --weight-regular:400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* — Backgrounds & surfaces — */
  --bg-primary:        #ffffff;
  --bg-subtle:         #f3f7f2;   /* very light green-tinted off-white */
  --bg-dark:           #262926;   /* dark surface (nav, footer)        */

  /* — Border — */
  --border-default:    #dddddd;
  --border-subtle:     #cccccc;

  /* — Text — */
  --text-primary:      #101010;   /* near-black, main body      */
  --text-secondary:    #333333;   /* slightly lighter body      */
  --text-tertiary:     #515750;   /* muted paragraphs           */
  --text-muted:        #999c98;   /* placeholders, timestamps   */
  --text-on-dark:      #ffffff;   /* text on --bg-dark surfaces */

  /* — Brand accent (burgundy / wine) — */
  --brand-tint:        #ffdede;   /* light bg for brand badges  */
  --brand-mid:         #da3833;   /* CTA backgrounds, highlights*/
  --brand-dark:        #691b32;   /* primary brand color        */
  --brand-alt:         #b90748;   /* alternate accent           */

  /* — Semantic / status — */
  --status-success:    #00946e;
  --status-success-bg: rgba(215, 231, 213, 0.5);
  --status-warning:    #eb8a23;
  --status-warning-alt:#f1a827;
  --status-danger:     #da3833;
  --status-danger-bg:  #ffdede;

  /* — Spacing (7px base grid) — */
  --space-1:    7px;
  --space-2:    14px;
  --space-3:    21px;
  --space-4:    28px;
  --space-6:    42px;
  --space-8:    56px;
  --space-9:    63px;
  --space-12:   84px;

  /* — Component spacing shortcuts — */
  --gap-xs:         7px;     /* tight inline gaps             */
  --gap-sm:         14px;    /* between items in a row        */
  --gap-md:         28px;    /* between columns               */
  --gap-lg:         42px;    /* between page sections         */
  --pad-card:       20px 24px;
  --pad-card-lg:    28px 32px;
  --pad-btn:        8.75px 26.25px;
  --pad-btn-sm:     7px 14px;
  --pad-section:    56px 0;

  /* — Border radius — */
  --radius-xs:    4px;        /* inputs, inline elements       */
  --radius-sm:    6px;        /* small cards, dropdowns        */
  --radius-md:    8px;        /* standard components           */
  --radius-lg:    20px;       /* prominent cards, modals       */
  --radius-xl:    25px;       /* large feature cards           */
  --radius-pill:  100px;      /* badges, tags, pills           */

  /* — Asymmetric radii (tab/card-header pattern seen on site) — */
  --radius-top:    8px 8px 0 0;
  --radius-bottom: 0 0 4px 4px;

}


/* -------------------------------------------------------------
   3. BASE RESET & DEFAULTS
   Body default → Roboto, matching the host site's prose.
   GT America Mono is reserved for accent/interactive elements.
   ------------------------------------------------------------- */

html,
body,
#app,
#react-entry-point,
._dash-app-content {
  font-family:  var(--font-ui);
  font-size:    var(--text-base);
  font-weight:  var(--weight-regular);
  color:        var(--text-primary);
  background:   var(--bg-primary);
  line-height:  1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Webflow body-text classes — keep Roboto to match host prose */
.text-light,
.text-light.center,
.text-light.more,
.text-block-7,
.text-block-7.move {
  font-family: var(--font-ui);
}

/* Interactive controls → brand mono */
input,
select,
textarea,
button {
  font-family: var(--font-brand);
}


/* -------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   Use these class names on Dash html.* components via className=
   ------------------------------------------------------------- */

.t-brand   { font-family: var(--font-brand); }
.t-ui      { font-family: var(--font-ui); }

.t-xs      { font-size: var(--text-xs); }
.t-sm      { font-size: var(--text-sm); }
.t-base    { font-size: var(--text-base); }
.t-md      { font-size: var(--text-md); }
.t-lg      { font-size: var(--text-lg); }
.t-xl      { font-size: var(--text-xl); }
.t-2xl     { font-size: var(--text-2xl); }

.t-light   { font-weight: var(--weight-light); }
.t-regular { font-weight: var(--weight-regular); }
.t-medium  { font-weight: var(--weight-medium); }
.t-bold    { font-weight: var(--weight-bold); }

.t-primary   { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary  { color: var(--text-tertiary); }
.t-muted     { color: var(--text-muted); }
.t-on-dark   { color: var(--text-on-dark); }
.t-brand-col { color: var(--brand-dark); }


/* -------------------------------------------------------------
   5. LAYOUT UTILITIES
   ------------------------------------------------------------- */

.surface           { background: var(--bg-primary); }
.surface-subtle    { background: var(--bg-subtle); }
.surface-dark      { background: var(--bg-dark); }

.card {
  background:    var(--bg-primary);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding:       var(--pad-card);
}

.card-lg {
  background:    var(--bg-primary);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--pad-card-lg);
}

.card-subtle {
  background:    var(--bg-subtle);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       var(--pad-card);
}

.divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}


/* -------------------------------------------------------------
   6. COMPONENT UTILITIES
   ------------------------------------------------------------- */

/* — Badges / pills — */
.badge {
  display:       inline-block;
  font-family:   var(--font-brand);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-regular);
  padding:       2.8px 7px;
  border-radius: var(--radius-pill);
  line-height:   1.4;
}

.badge-brand   { background: var(--brand-tint);        color: var(--brand-dark); }
.badge-success { background: var(--status-success-bg); color: var(--status-success); }
.badge-warning { background: #fef3e2;                  color: var(--status-warning); }
.badge-danger  { background: var(--status-danger-bg);  color: var(--status-danger); }
.badge-neutral { background: var(--bg-subtle);         color: var(--text-tertiary); }

/* — Buttons — */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            var(--gap-xs);
  font-family:    var(--font-brand);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  padding:        var(--pad-btn);
  border-radius:  var(--radius-pill);
  border:         1px solid transparent;
  cursor:         pointer;
  transition:     background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration:none;
}

.btn-primary {
  background:   var(--brand-dark);
  color:        #ffffff;
  border-color: var(--brand-dark);
}
.btn-primary:hover {
  background:   var(--brand-alt);
  border-color: var(--brand-alt);
}

.btn-outline {
  background:   transparent;
  color:        var(--text-primary);
  border-color: var(--border-default);
}
.btn-outline:hover {
  border-color: var(--text-primary);
}

.btn-sm {
  font-size: var(--text-xs);
  padding:   var(--pad-btn-sm);
}

/* — Metric / stat card — */
.metric-card {
  background:    var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding:       var(--space-3);
  display:       flex;
  flex-direction:column;
  gap:           var(--gap-xs);
}

.metric-label {
  font-family:  var(--font-brand);
  font-size:    var(--text-xs);
  font-weight:  var(--weight-light);
  color:        var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-value {
  font-family:  var(--font-brand);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  line-height:  1.1;
}

.metric-delta-up   { font-size: var(--text-xs); color: var(--status-success); }
.metric-delta-down { font-size: var(--text-xs); color: var(--status-danger); }

/* — Data table — */
.dash-table-container .dash-spreadsheet-container {
  font-family: var(--font-ui) !important;
  font-size:   var(--text-sm) !important;
}

.dash-table-container .dash-header {
  font-family:      var(--font-ui) !important;
  font-weight:      var(--weight-bold) !important;
  font-size:        var(--text-xs) !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.06em !important;
  color:            var(--text-muted) !important;
  background-color: var(--bg-subtle) !important;
  border-bottom:    2px solid var(--border-default) !important;
}

.dash-table-container .dash-cell {
  font-family:  var(--font-ui) !important;
  color:        var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

.dash-table-container .dash-cell:focus {
  border-color: var(--brand-dark) !important;
}


/* -------------------------------------------------------------
   7. PLOTLY / DASH GRAPH OVERRIDES
   Applied globally — Plotly injects its own inline styles so
   these use !important selectively.
   ------------------------------------------------------------- */

.js-plotly-plot .plotly .main-svg {
  font-family: var(--font-ui) !important;
}

/* Axis tick labels */
.js-plotly-plot .plotly .xtick text,
.js-plotly-plot .plotly .ytick text {
  font-family: var(--font-ui) !important;
  font-size:   11px !important;
  fill:        var(--text-muted) !important;
}

/* Axis titles */
.js-plotly-plot .plotly .g-gtitle text,
.js-plotly-plot .plotly .xtitle,
.js-plotly-plot .plotly .ytitle {
  font-family: var(--font-ui) !important;
  fill:        var(--text-secondary) !important;
}

/* Legend text */
.js-plotly-plot .plotly .legend text {
  font-family: var(--font-ui) !important;
  font-size:   12px !important;
  fill:        var(--text-secondary) !important;
}

/* Tooltip / hover box */
.js-plotly-plot .plotly .hoverlayer .hovertext text {
  font-family: var(--font-ui) !important;
  font-size:   12px !important;
}


/* -------------------------------------------------------------
   8. SPACING UTILITIES (margin / padding helpers)
   ------------------------------------------------------------- */

.mt-1 { margin-top:    var(--space-1); }
.mt-2 { margin-top:    var(--space-2); }
.mt-3 { margin-top:    var(--space-3); }
.mt-4 { margin-top:    var(--space-4); }
.mt-6 { margin-top:    var(--space-6); }
.mt-8 { margin-top:    var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }

.p-card    { padding: var(--pad-card); }
.p-section { padding: var(--pad-section); }