/* ============================================================================
   Sto Field Intelligence — shared design system
   2026-08-07
   Loaded after fi-theme.css and fi-chrome.css on every screen.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  /* Approved Sto accent family */
  --sto-blue-1:#617489; /* Blue grey 1 — RGB 97 116 137 */
  --sto-blue-2:#929FB2; /* Blue grey 2 — RGB 146 159 178 */
  --sto-blue-3:#AFB8C7; /* Blue grey 3 — RGB 175 184 199 */
  --info:var(--sto-blue-1);
  --info-hover:var(--sto-blue-2);
  --info-soft:var(--sto-blue-3);

  /* Shared semantic colors */
  --warning-bg:#A92720;
  --warning-border:#8E211B;
  --warning-text:#FFFFFF;
  --icon:#6D7379;
  --icon-bg:#F7F7F6;
  --icon-border:#C9CDD0;

  /* Typography */
  --sans:'Open Sans',Arial,sans-serif;
  --mono:'Open Sans',Arial,sans-serif;
}

:root[data-theme="light"] {
  --bg:#F2F3F3;
  --panel:#FFFFFF;
  --panel-2:#F7F8F8;
  --raise:#EAECED;
  --line:#CFD3D5;
  --line-soft:#DFE2E4;
  --text:#171717;
  --muted:#555B60;
  --muted-2:#737A80;
  --icon:#687178;
  --icon-bg:#F7F7F6;
  --icon-border:#C9CDD0;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:#F2F3F3;
    --panel:#FFFFFF;
    --panel-2:#F7F8F8;
    --raise:#EAECED;
    --line:#CFD3D5;
    --line-soft:#DFE2E4;
    --text:#171717;
    --muted:#555B60;
    --muted-2:#737A80;
    --icon:#687178;
    --icon-bg:#F7F7F6;
    --icon-border:#C9CDD0;
  }
}

/* Open Sans everywhere. Keep iconography as SVG/Unicode rather than icon fonts. */
html,body,button,input,textarea,select,option,label,a,p,span,div,section,article,
header,footer,nav,main,aside,table,thead,tbody,tfoot,tr,th,td,ul,ol,li,
h1,h2,h3,h4,h5,h6,small,strong,b,em{
  font-family:'Open Sans',Arial,sans-serif;
}

/* Permanent app shell: white header, hamburger left, Sto logo flush right. */
header.app{
  background:#FFFFFF !important;
  color:#171717 !important;
  border-top:0 !important;
  border-bottom:1px solid #D5D8DA !important;
}
header.app .bar{max-width:none !important;width:100% !important;}
header.app .hamburger{color:#171717 !important;}
header.app .hamburger span{background:#171717 !important;}
header.app .header-logo{margin-left:auto !important;}

/* Context row under header: page identity + return link, never inside header. */
.fi-tool-context{
  background:var(--panel-2) !important;
  border-bottom:1px solid var(--line) !important;
}
.fi-tool-context__title{color:var(--sto-blue-1) !important;}
.fi-tool-context__icon{
  color:var(--icon) !important;
  background:var(--icon-bg) !important;
  border-color:var(--icon-border) !important;
}
.fi-tool-context__home{
  color:var(--text) !important;
  background:var(--panel) !important;
  border-color:var(--line) !important;
}
.fi-tool-context__home:hover{border-color:var(--sto-blue-2) !important;background:var(--panel-2) !important;}

/* Informational hierarchy: approved Sto Blue Grey 1, never yellow. */
.eyebrow,
.label,
.section-label,
.section-title,
.kicker,
.overline,
.seg,
.intro .eyebrow,
.readout b,
.reorder-hint .linkbtn,
.crumbs,
.crumbs a,
.crumbs button,
.visit-head .vt,
.card > h2 .n,
.sheet-body .ver,
.sheet-body .step .n,
.fi-meta,
.fi-section-label{
  color:var(--sto-blue-1) !important;
}

/* Text links use the approved blue; primary action buttons remain Sto yellow. */
a:not(.btn-primary):not(.primary):not(.gen):not(.hub-top):not(.tile),
.linkbtn,
.text-link{
  text-decoration-color:currentColor;
}
.linkbtn,.text-link{color:var(--sto-blue-1) !important;}
.linkbtn:hover,.text-link:hover{color:var(--sto-blue-2) !important;}

/* Home/tool cards and neutral icon treatment. */
.tile,
.card,
.panel{
  border-color:var(--line-soft);
}
.tile .glyph,
.tool-icon,
.card-icon,
.fi-icon,
.ico{
  background:var(--icon-bg) !important;
  border-color:var(--icon-border) !important;
  color:var(--icon) !important;
}
.tile .glyph svg,
.tool-icon svg,
.card-icon svg,
.fi-icon svg,
.ico svg{
  color:var(--icon) !important;
  stroke:currentColor;
}

/* LIVE is a neutral status label, not an action. */
.chip.live,
.live-badge,
.status-live,
.badge-live{
  background:#FFFFFF !important;
  color:#171717 !important;
  border:1px solid #70767A !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
:root[data-theme="dark"] .chip.live,
:root[data-theme="dark"] .live-badge,
:root[data-theme="dark"] .status-live,
:root[data-theme="dark"] .badge-live{
  background:#F2F3F3 !important;
  color:#171717 !important;
  border-color:#9AA0A4 !important;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .chip.live,
  :root[data-theme="auto"] .live-badge,
  :root[data-theme="auto"] .status-live,
  :root[data-theme="auto"] .badge-live{
    background:#F2F3F3 !important;
    color:#171717 !important;
    border-color:#9AA0A4 !important;
  }
}

/* Warning/error notices: white text on accessible deep red in every theme. */
.toast.err,
.toast.error,
.error-toast,
.warning-toast,
.alert-error,
[role="alert"].error,
.notice.error,
.notice.warning{
  background:var(--warning-bg) !important;
  border-color:var(--warning-border) !important;
  color:var(--warning-text) !important;
}
.toast.err *,
.toast.error *,
.error-toast *,
.warning-toast *,
.alert-error *,
[role="alert"].error *,
.notice.error *,
.notice.warning *{
  color:var(--warning-text) !important;
}

/* Form controls share one neutral treatment. */
input,textarea,select{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--sto-blue-1) !important;
  outline-color:var(--sto-blue-1) !important;
}

/* Keep yellow for actions/active states only. */
.btn-primary,
button.primary,
.gen,
#addVisit,
.sv-open{
  background:var(--sto) !important;
  color:var(--sto-ink) !important;
}

/* Focus ring follows approved blue instead of yellow. */
:focus-visible{outline-color:var(--sto-blue-1) !important;}

/* Dark mode maintains the exact same hierarchy with theme-appropriate surfaces. */
:root[data-theme="dark"] .fi-tool-context__title,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .label,
:root[data-theme="dark"] .seg,
:root[data-theme="dark"] .readout b,
:root[data-theme="dark"] .reorder-hint .linkbtn,
:root[data-theme="dark"] .intro .eyebrow,
:root[data-theme="dark"] .visit-head .vt,
:root[data-theme="dark"] .card > h2 .n{
  color:var(--sto-blue-2) !important;
}