/* ============================================================
   Command Center design system — site-wide variant theme layer.
   Scoped to html[data-design="cmdcenter"] (set by theme.js on every page,
   including the admin console). Additive: removing this file or switching
   design restores every page exactly. Source of truth: the Command Center
   handoff prototypes (design_handoff_command_center/pages/*).
   ============================================================ */

/* ---- Tokens (override the shared page tokens, hub + admin) ---- */
html[data-design="cmdcenter"]{
  --bg:#002A30;
  --surface:#0E4A52;
  --ink:#FFFFFF;
  --muted:rgba(255,255,255,.7);
  --line:rgba(255,255,255,.18);
  --petrol-tint:rgba(255,255,255,.08);
  --radius:12px;
  --shadow:none;
  --shadow-lift:0 18px 44px rgba(0,0,0,.45);
}
html[data-design="cmdcenter"] body{
  background:radial-gradient(120% 80% at 80% 0%, #0E4A52 0%, #003D44 60%, #002A30 100%) fixed;
  color:#fff;
}
/* Corner decoration: the FOOTER wedge only (per handoff screenshots) — no
   fixed page ribbon, so the two never stack. */
html[data-design="cmdcenter"] body > *{position:relative; z-index:1;}

/* ---- Type + links ---- */
html[data-design="cmdcenter"] h1, html[data-design="cmdcenter"] h2, html[data-design="cmdcenter"] h3,
html[data-design="cmdcenter"] h4{color:#fff;}
html[data-design="cmdcenter"] a{color:#C1FA00;}

/* ---- Shared chrome (public pages) ---- */
html[data-design="cmdcenter"] header.site{background:#07333A; border-color:rgba(255,255,255,.14);}
html[data-design="cmdcenter"] header.site a, html[data-design="cmdcenter"] header.site button{color:#EAF2F2;}
html[data-design="cmdcenter"] header.site .brand, html[data-design="cmdcenter"] header.site .brand *,
html[data-design="cmdcenter"] header.site [class*="brand"] span, html[data-design="cmdcenter"] header.site h1,
html[data-design="cmdcenter"] header.site b{color:#fff;}
html[data-design="cmdcenter"] header.site small, html[data-design="cmdcenter"] header.site .sub{color:rgba(255,255,255,.65);}
html[data-design="cmdcenter"] header.site input{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;}
html[data-design="cmdcenter"] header.site input::placeholder{color:rgba(255,255,255,.55);}
html[data-design="cmdcenter"] nav.primary a{color:#CFE3E3; border-radius:999px; padding:6px 14px;}
html[data-design="cmdcenter"] nav.primary a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none;}
html[data-design="cmdcenter"] nav.primary a.current{background:#C1FA00; color:#003D44;}
html[data-design="cmdcenter"] footer.site{background:#07333A; color:#CFE3E3; border-color:rgba(255,255,255,.14);}
html[data-design="cmdcenter"] footer.site a{color:#C1FA00;}
html[data-design="cmdcenter"] .crumbs{background:transparent; border-color:rgba(255,255,255,.12);}
html[data-design="cmdcenter"] .crumbs a, html[data-design="cmdcenter"] .crumbs span{color:rgba(255,255,255,.75);}

/* ---- Cards / rows (opaque #0E4A52, hairline, 12px radius, spec hover) ---- */
html[data-design="cmdcenter"] .card,
html[data-design="cmdcenter"] .cards > *,
html[data-design="cmdcenter"] .fx-card,
html[data-design="cmdcenter"] .bento-card,
html[data-design="cmdcenter"] .news-item,
html[data-design="cmdcenter"] .svc,
html[data-design="cmdcenter"] .joiner-card{
  background:#0E4A52 !important; border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px; box-shadow:none; color:#fff;
  transition:background 120ms cubic-bezier(.2,.6,.2,1);
}
html[data-design="cmdcenter"] .cards > a:hover,
html[data-design="cmdcenter"] .news-item:hover,
html[data-design="cmdcenter"] .svc:hover{background:#275C63 !important; border-color:rgba(255,255,255,.28) !important;}
html[data-design="cmdcenter"] .card p, html[data-design="cmdcenter"] .cards p,
html[data-design="cmdcenter"] .card span, html[data-design="cmdcenter"] .card small{color:rgba(255,255,255,.75);}

/* ---- Accent: lime CTAs (teal text on lime), badges, focus ---- */
html[data-design="cmdcenter"] .btn.primary, html[data-design="cmdcenter"] .btn-lime,
html[data-design="cmdcenter"] .hero-cta, html[data-design="cmdcenter"] .fx-msg a.fx-msg-cta{
  background:#C1FA00; color:#003D44; border-color:#C1FA00;
}
html[data-design="cmdcenter"] .badge{background:#C1FA00 !important; color:#003D44 !important; border:0 !important;}
html[data-design="cmdcenter"] :focus-visible{outline:4px solid rgba(193,250,0,.55); outline-offset:2px;}

/* ---- Admin console (dark left-rail per the Admin prototype) ---- */
html[data-design="cmdcenter"] .shell{background:transparent;}
html[data-design="cmdcenter"] aside, html[data-design="cmdcenter"] .sidebar{background:#07333A; border-color:rgba(255,255,255,.14);}
html[data-design="cmdcenter"] .nav-item, html[data-design="cmdcenter"] aside a, html[data-design="cmdcenter"] aside button{color:#CFE3E3;}
html[data-design="cmdcenter"] .nav-item.active, html[data-design="cmdcenter"] aside a.active{background:#C1FA00 !important; color:#003D44 !important;}
html[data-design="cmdcenter"] table.grid th{color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.14);}
html[data-design="cmdcenter"] table.grid td{border-color:rgba(255,255,255,.12); color:#fff;}
html[data-design="cmdcenter"] .pill{background:rgba(255,255,255,.1); color:#EAF2F2; border-color:rgba(255,255,255,.2);}
html[data-design="cmdcenter"] .pill.active, html[data-design="cmdcenter"] .pill.featured{background:#C1FA00; color:#003D44;}
html[data-design="cmdcenter"] input, html[data-design="cmdcenter"] select, html[data-design="cmdcenter"] textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff;
}
html[data-design="cmdcenter"] input::placeholder, html[data-design="cmdcenter"] textarea::placeholder{color:rgba(255,255,255,.45);}
html[data-design="cmdcenter"] .btn{border-color:rgba(255,255,255,.25); color:#EAF2F2; background:transparent;}
html[data-design="cmdcenter"] .btn:hover{background:rgba(255,255,255,.08);}
html[data-design="cmdcenter"] .btn.lime{background:#C1FA00; color:#003D44; border-color:#C1FA00;}


/* ---- Audit fixes ---- */
/* Sign-in card: readable title/labels, lime primary CTA, visible links. */
html[data-design="cmdcenter"] .login-panel div, html[data-design="cmdcenter"] .login-panel p,
html[data-design="cmdcenter"] .login-panel label{color:#EAF2F2;}
html[data-design="cmdcenter"] .login-panel .login-note, html[data-design="cmdcenter"] .login-panel small{color:rgba(255,255,255,.65);}
html[data-design="cmdcenter"] .login-btn{background:#C1FA00; color:#003D44; border-color:#C1FA00; font-weight:700; transition:filter 120ms cubic-bezier(.2,.6,.2,1);}
html[data-design="cmdcenter"] .login-btn:hover{filter:brightness(.95);}
html[data-design="cmdcenter"] .link-btn{color:#C1FA00;}
/* Badges keep teal-on-lime even inside .card scopes. */
html[data-design="cmdcenter"] .badge{color:#003D44 !important;}
/* Ticker (HSE alert) stays readable on the dark canvas. */
html[data-design="cmdcenter"] .ticker{background:#3A2F10; border-color:rgba(254,182,0,.4); color:#FFE9B8;}
html[data-design="cmdcenter"] .ticker b, html[data-design="cmdcenter"] .ticker strong{color:#FEB600;}
/* Section heads / muted text floors (contrast >= .6 white). */
html[data-design="cmdcenter"] .section-note, html[data-design="cmdcenter"] .sub{color:rgba(255,255,255,.7);}
/* Light-surface wells (e.g. brand logo tiles) keep a white plate so color
   logos stay visible; the color lockup is correct on light per the spec. */
html[data-design="cmdcenter"] .logo-tile, html[data-design="cmdcenter"] .bp-logo, html[data-design="cmdcenter"] .swatch-card .chip{background:#fff;}

/* Onboarding page header (uses .site-head, not header.site). */
html[data-design="cmdcenter"] .site-head{background:#07333A; border-color:rgba(255,255,255,.14);}
html[data-design="cmdcenter"] .site-head b, html[data-design="cmdcenter"] .site-head .wordmark,
html[data-design="cmdcenter"] .site-head div{color:#fff;}
html[data-design="cmdcenter"] .login-title{color:#fff;}
html[data-design="cmdcenter"] .login-sub{color:rgba(255,255,255,.7);}
html[data-design="cmdcenter"] .login-error{color:#FF9B9B;}

/* ---- Footer per handoff 4: all-companies strip + theme wedge ---- */
html[data-design="cmdcenter"] footer.site{position:relative; overflow:hidden;}
html[data-design="cmdcenter"] footer.site::after{
  content:""; position:absolute; inset-inline-end:-120px; bottom:-200px; height:340px; width:340px;
  background:url("/variants-assets/theme-colored.svg") no-repeat bottom right / contain;
  opacity:.9; pointer-events:none;
}
html[dir="rtl"][data-design="cmdcenter"] footer.site::after{transform:scaleX(-1);}
.cc-footbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:18px; padding-top:14px; position:relative; z-index:1;}
.cc-footbar img{height:30px; width:auto; display:block;}
.cc-footbar span{text-align:end; font-size:12px; color:rgba(255,255,255,.55); padding-inline-end:150px;}
@media (max-width:700px){
  html[data-design="cmdcenter"] footer.site::after{display:none;}
  .cc-footbar span{text-align:start; padding-inline-end:0;}
  .cc-footbar img{height:22px;}
}

/* ---- Footer columns per handoff 4 screenshots ---- */
html[data-design="cmdcenter"] footer.site .strata{display:none;}
.cc-fcols{display:flex; gap:64px; flex-wrap:wrap;}
.cc-fh{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:10px;}
html[data-design="cmdcenter"] footer.site .cc-fcol a{display:block; color:rgba(255,255,255,.72); font-size:14px; text-decoration:none; padding:4px 0;}
html[data-design="cmdcenter"] footer.site .cc-fcol a:hover{color:#fff; text-decoration:none;}
.cc-fbottom{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); margin-top:24px; padding-top:16px; position:relative; z-index:1;}
.cc-fbrandrow{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.cc-fgig{height:36px; width:auto; display:block;}
.cc-fsubs{height:17px; width:auto; display:block; opacity:.95;}
.cc-flegal{font-size:13.5px; color:rgba(255,255,255,.55); text-align:end; padding-inline-end:150px;}
@media (max-width:700px){.cc-flegal{padding-inline-end:0; text-align:start;} .cc-fsubs{height:22px;}}