/* ==========================================================================
   iceConnect — theme.css
   Ready-to-paste CSS custom properties generated from the brand design system.
   Source of truth: https://brand.iceconnect.com  ·  machine-readable: /dist/tokens.json
   COUPLING: the core palette here mirrors tokens.json. If you change a brand
   colour, change it in tokens.json too and run `python3 tools/build-tokens.py --check`
   to confirm they still match (see tools/BUILD.md).
   Drop this into any web project and reference tokens with var(--ic-...).
   Light is the default; dark applies under prefers-color-scheme: dark
   OR when you set data-theme="dark" on a parent element.
   ========================================================================== */

:root {
  /* --- Primitive colours (raw values — avoid referencing directly in UI) --- */
  --ic-slate:        #0F172A;
  --ic-slate-800:    #1E293B;
  --ic-slate-700:    #334155;
  --ic-slate-600:    #475569;
  --ic-slate-500:    #64748B;
  --ic-slate-300:    #CBD5E1;
  --ic-slate-200:    #E2E8F0;
  --ic-slate-100:    #F1F5F9;
  --ic-offwhite:     #FAFAF8;
  --ic-white:        #FFFFFF;
  --ic-brass:        #C8A35B;
  --ic-brass-hover:  #BC9550;       /* darken brass on hover/active; keep slate text */
  --ic-brass-hover-dark: #D4B373;   /* dark surfaces LIGHTEN brass on hover instead */
  --ic-brass-active: #B89149;
  --ic-brass-tint:   #F6F3EB;
  --ic-steel:        #4E7CA1;
  --ic-steel-hover:  #456E8E;  /* darken steel on secondary-button hover */

  /* --- Semantic colours · light (reference THESE in UI, by role) --- */
  --ic-text-primary:     var(--ic-slate);
  --ic-text-secondary:   var(--ic-slate-500);
  --ic-text-inverse:     var(--ic-white);
  --ic-text-on-accent:   var(--ic-slate);     /* slate text on brass — never white */
  --ic-bg-page:          var(--ic-offwhite);
  --ic-bg-surface:       var(--ic-white);
  --ic-bg-muted:         var(--ic-slate-100);
  --ic-bg-accent:        var(--ic-brass-tint); /* callout / highlight panel fills */
  --ic-bg-inverse:       var(--ic-slate);
  --ic-border-default:   var(--ic-slate-200);
  --ic-border-strong:    var(--ic-slate-300);
  --ic-action-primary:        var(--ic-brass);
  --ic-action-primary-hover:  var(--ic-brass-hover);
  --ic-action-primary-active: var(--ic-brass-active);
  --ic-action-secondary:       var(--ic-steel);
  --ic-action-secondary-hover: var(--ic-steel-hover);
  --ic-focus-ring:       var(--ic-brass);

  /* --- Status sets · bg / base (icon, fill) / text (AA on white) --- */
  --ic-success-bg:   #DCFCE7;  --ic-success-base: #22C55E;  --ic-success-text: #15803D;
  --ic-warning-bg:   #FEF3C7;  --ic-warning-base: #D97706;  --ic-warning-text: #B45309;
  --ic-error-bg:     #FEE2E2;  --ic-error-base:   #DC2626;  --ic-error-text:   #B91C1C;
  --ic-info-bg:      #E8EFF5;  --ic-info-base:    #4E7CA1;  --ic-info-text:    #3B5F7D;

  /* --- Chart palettes (use categorical IN ORDER; steel & brass lead) --- */
  --ic-chart-1: #4E7CA1; /* steel */
  --ic-chart-2: #C8A35B; /* brass */
  --ic-chart-3: #4F9D8C; /* teal  */
  --ic-chart-4: #8C6A93; /* plum  */
  --ic-chart-5: #C0795B; /* clay  */
  --ic-chart-6: #64748B; /* slate */

  /* --- Typography --- */
  --ic-font-heading: 'Bricolage Grotesque', system-ui, sans-serif; /* headings ONLY, >=18px */
  --ic-font-body:    'DM Sans', system-ui, sans-serif;             /* body, UI, buttons */
  --ic-weight-regular:   400;
  --ic-weight-medium:    500;
  --ic-weight-semibold:  600;
  --ic-weight-bold:      700;
  --ic-weight-extrabold: 800;
  --ic-size-display:  56px;
  --ic-size-title:    32px;
  --ic-size-heading:  22px;
  --ic-size-sub:      18px;
  --ic-size-body:     16px;
  --ic-size-small:    14px;
  --ic-size-caption:  11px;
  --ic-lh-display: 0.95;
  --ic-lh-heading: 1.0;
  --ic-lh-body:    1.3;

  /* --- Spacing (8px base, 4px half-step) --- */
  --ic-space-2xs: 4px;
  --ic-space-xs:  8px;
  --ic-space-sm:  12px;
  --ic-space-md:  16px;
  --ic-space-lg:  24px;
  --ic-space-xl:  32px;
  --ic-space-2xl: 48px;
  --ic-space-3xl: 64px;

  /* --- Radius --- */
  --ic-radius-sm:   6px;   /* controls, inputs */
  --ic-radius-md:   8px;   /* buttons */
  --ic-radius-lg:   12px;  /* cards */
  --ic-radius-xl:   20px;  /* panels */
  --ic-radius-full: 9999px;

  /* --- Breakpoints (mobile-first min-widths; for @media and container queries) --- */
  --ic-bp-sm: 375px;   /* phone */
  --ic-bp-md: 768px;   /* tablet */
  --ic-bp-lg: 1024px;  /* laptop */
  --ic-bp-xl: 1440px;  /* desktop */

  /* --- Layering (z-index scale; stay on the scale, never ad-hoc 9999) --- */
  --ic-z-base:     0;     /* page content, normal flow */
  --ic-z-dropdown: 1000;  /* menus, selects */
  --ic-z-sticky:   1100;  /* sticky headers & toolbars */
  --ic-z-overlay:  1200;  /* modal scrim / backdrop */
  --ic-z-modal:    1300;  /* dialogs & sheets */
  --ic-z-popover:  1400;  /* popovers & tooltips */
  --ic-z-toast:    1500;  /* transient alerts — above all */

  /* --- Elevation (soft slate shadows; use borders, not shadow, in dark mode) --- */
  --ic-elevation-sm: 0 1px 2px rgba(15,23,42,0.06);
  --ic-elevation-md: 0 2px 8px rgba(15,23,42,0.08);
  --ic-elevation-lg: 0 8px 24px rgba(15,23,42,0.12);

  /* --- Motion --- */
  --ic-motion-fast: 120ms;
  --ic-motion-base: 180ms;
  --ic-motion-slow: 280ms;
  --ic-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --ic-pulse-duration: 2.4s;
  --ic-pulse-ease: ease-out;
}

/* --- Semantic colours · dark ---
   Swaps ONLY the semantic layer. In dark mode, separate surfaces with
   border-default rather than relying on shadow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-text-primary:   var(--ic-slate-100);
    --ic-text-secondary: #94A3B8;
    --ic-text-inverse:   var(--ic-slate);  /* flips with bg-inverse — else white-on-offwhite */
    --ic-bg-page:        var(--ic-slate);
    --ic-bg-surface:     var(--ic-slate-800);
    --ic-bg-muted:       var(--ic-slate-700);
    --ic-bg-accent:      var(--ic-slate-700);
    --ic-bg-inverse:     var(--ic-offwhite);
    --ic-border-default: var(--ic-slate-700);
    --ic-border-strong:  var(--ic-slate-600);
    /* primary hover LIGHTENS on dark surfaces; all other action + focus
       colours are intentionally unchanged in dark mode */
    --ic-action-primary-hover: var(--ic-brass-hover-dark);
  }
}

[data-theme="dark"] {
  --ic-text-primary:   var(--ic-slate-100);
  --ic-text-secondary: #94A3B8;
  --ic-text-inverse:   var(--ic-slate);
  --ic-bg-page:        var(--ic-slate);
  --ic-bg-surface:     var(--ic-slate-800);
  --ic-bg-muted:       var(--ic-slate-700);
  --ic-bg-accent:      var(--ic-slate-700);
  --ic-bg-inverse:     var(--ic-offwhite);
  --ic-border-default: var(--ic-slate-700);
  --ic-border-strong:  var(--ic-slate-600);
  --ic-action-primary-hover: var(--ic-brass-hover-dark);
}

/* --- Live status pulse — pure CSS, honours reduced motion ---
   Markup: <span class="ic-dot" style="--ic-gc:34,197,94"></span> (RGB triplet). */
.ic-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--ic-gc, 34,197,94));
  animation: ic-pulse var(--ic-pulse-duration) var(--ic-pulse-ease) infinite;
}
@keyframes ic-pulse {
  0%       { box-shadow: 0 0 0 0   rgba(var(--ic-gc, 34,197,94), 0.7); }
  70%,100% { box-shadow: 0 0 0 8px rgba(var(--ic-gc, 34,197,94), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ic-dot { animation: none; box-shadow: 0 0 0 3px rgba(var(--ic-gc, 34,197,94), 0.25); }
}

/* --- Status pill — compact inline state; pair with .ic-dot for "live" states ---
   Markup: <span class="ic-pill"><span class="ic-dot" style="--ic-gc:34,197,94"></span>All systems operational</span>
   On a dark surface, set data-theme="dark" on an ancestor for the translucent treatment. */
.ic-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--ic-radius-full);
  border: 1px solid var(--ic-border-default);
  background: var(--ic-bg-surface);
  color: var(--ic-text-secondary);
  padding: 9px 17px 9px 15px;
  font: var(--ic-weight-medium) 11px/1 var(--ic-font-body);
  letter-spacing: 0.01em; white-space: nowrap;
}
[data-theme="dark"] .ic-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: #94A3B8;
}

/* --- Status banner — an inline status message in its tint ---
   Markup: <div class="ic-banner ic-banner--warning"><svg.../><div>…</div></div>
   Always pair the colour with the icon or text (accessibility). */
.ic-banner {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid; border-radius: 10px;   /* component.banner.radius — tighter than card lg(12) */
  padding: 13px 15px; font: var(--ic-weight-regular) 13.5px/1.5 var(--ic-font-body);
}
.ic-banner--success { background: var(--ic-success-bg); border-color: #BBF7D0; color: var(--ic-success-text); }
.ic-banner--warning { background: var(--ic-warning-bg); border-color: #FDE68A; color: var(--ic-warning-text); }
.ic-banner--error   { background: var(--ic-error-bg);   border-color: #FECACA; color: var(--ic-error-text); }
.ic-banner--info    { background: var(--ic-info-bg);    border-color: #CFDEEA; color: var(--ic-info-text); }

/* --- Button — primary / secondary / ghost · sizes sm·md·lg · all states ---
   Markup: <button class="ic-btn ic-btn--primary">Set up monitoring</button>
   Slate text on brass (never white); brass darkens on hover/active. (component.button) */
.ic-btn {
  display: inline-block; font-family: var(--ic-font-body); font-weight: 700;
  font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px; padding: 11px 20px;
  transition: background var(--ic-motion-fast) var(--ic-motion-ease);
}
.ic-btn--sm { font-size: 12.5px; padding: 8px 14px; }
.ic-btn--lg { font-size: 15px;   padding: 14px 26px; }
.ic-btn--primary   { background: var(--ic-action-primary); color: var(--ic-text-on-accent); }
.ic-btn--primary:hover  { background: var(--ic-action-primary-hover); }
.ic-btn--primary:active { background: var(--ic-action-primary-active); }
.ic-btn--secondary { background: var(--ic-action-secondary); color: var(--ic-white); }
.ic-btn--secondary:hover { background: var(--ic-action-secondary-hover); }
.ic-btn--ghost { background: transparent; color: var(--ic-text-primary); border-color: var(--ic-border-default); }
.ic-btn--ghost:hover { background: var(--ic-bg-muted); }
.ic-btn:focus-visible { outline: 2px solid var(--ic-focus-ring); outline-offset: 2px; }
.ic-btn[disabled], .ic-btn--disabled { opacity: 0.4; pointer-events: none; }

/* --- Input / field — default · focus · error · disabled ---
   Markup: <input class="ic-field"> · add .ic-field--error for the error state.
   Pair with a visible <label>; on mobile ensure the control is ≥44px tall. (component.input) */
.ic-field {
  font-family: var(--ic-font-body); font-size: 14px; color: var(--ic-text-primary);
  background: var(--ic-bg-surface); border: 1px solid var(--ic-border-default);
  border-radius: 7px; padding: 10px 13px;
}
.ic-field:focus, .ic-field--focus {
  outline: none; border-color: var(--ic-focus-ring);
  box-shadow: 0 0 0 3px var(--ic-bg-accent);
}
.ic-field--error { border-color: var(--ic-error-base); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.ic-field[disabled], .ic-field--disabled { background: var(--ic-bg-muted); color: var(--ic-text-secondary); }

/* --- Card — the core content container (component.card) --- */
.ic-card {
  background: var(--ic-bg-surface); border: 1px solid var(--ic-border-default);
  border-radius: 12px; padding: 24px; box-shadow: var(--ic-elevation-sm);
}

/* --- Callout — brass-tint panel with a brass left border (component.callout) --- */
.ic-callout {
  background: var(--ic-bg-accent); border-left: 3px solid var(--ic-action-primary);
  border-radius: 8px; padding: 16px 20px; color: var(--ic-text-primary);
}

/* --- Skeleton — shimmer placeholder for loads >300ms; reserves layout (component.skeleton) ---
   Markup: <div class="ic-skeleton" style="height:12px;width:70%"></div> */
.ic-skeleton {
  background: linear-gradient(90deg, var(--ic-bg-muted) 25%, #E9EEF3 37%, var(--ic-bg-muted) 63%);
  background-size: 400% 100%; border-radius: 6px;
  animation: ic-shimmer 1.4s ease infinite;
}
@keyframes ic-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ic-skeleton { animation: none; } }