/* ============================================================
   Layer IQ — Scalar custom theme
   Brand: Charcoal Slate #1f2937 · Layer Blue #00AEF0 ·
          Tech Green #6cd987 · Layer Gray #c2d8f2 · O-White #F4F6F8

   Loaded via scalar.config.json -> siteConfig.head.styles. Overrides the
   built-in "default" theme variables; the default theme must remain set so the
   underlying structure these variables target is present.
   ============================================================ */

:root {
  /* Set these only if Layer IQ has a defined brand typeface.
     Your brand guide (pages provided) covers color, not type —
     leave commented to keep Scalar's default stack until confirmed. */
  /* --scalar-font: 'Inter', sans-serif; */
  /* --scalar-font-code: 'JetBrains Mono', monospace; */

  --scalar-text-decoration: none;          /* links underline on hover only */
  --scalar-text-decoration-hover: underline;
}

/* ---------- LIGHT MODE ---------- */
.light-mode {
  --scalar-background-1: #ffffff;          /* main content */
  --scalar-background-2: #f4f6f8;          /* O-White — panels */
  --scalar-background-3: #e6eaf0;          /* raised / hover */
  --scalar-background-accent: #00aef01a;   /* Layer Blue @ ~10% */

  --scalar-color-1: #1f2937;               /* Charcoal Slate — primary text */
  --scalar-color-2: #51607a;               /* muted slate */
  --scalar-color-3: #8a98ad;               /* tertiary */
  --scalar-color-accent: #0379a0;          /* DARKENED Layer Blue — AA-legible links on white */

  --scalar-border-color: #dfe4ec;

  --scalar-button-1: #00aef0;              /* full Layer Blue fill */
  --scalar-button-1-color: #06222e;        /* near-black text (passes contrast on blue) */
  --scalar-button-1-hover: #009bd6;

  /* Semantic colors → mapped 1:1 to the IQ-layer palette.
     Darkened where needed so badge text clears AA on white. */
  --scalar-color-green:  #0a8f63;          /* GET / 2xx    — Carbon IQ */
  --scalar-color-blue:   #297cfc;          /* POST         — Finance IQ */
  --scalar-color-red:    #dc2626;          /* DELETE / err — Risk IQ */
  --scalar-color-yellow: #b97908;          /* PUT / warn   — Energy IQ */
  --scalar-color-orange: #ea580c;          /* PATCH        — Build IQ */
  --scalar-color-purple: #9333ea;          /* End-of-Life IQ */

  --scalar-scrollbar-color: rgba(31, 41, 55, 0.18);
  --scalar-scrollbar-color-active: rgba(31, 41, 55, 0.36);
}

/* ---------- DARK MODE (brand-primary; matches your live site) ---------- */
.dark-mode {
  --scalar-background-1: #131a24;          /* page — deeper than charcoal */
  --scalar-background-2: #1f2937;          /* Charcoal Slate — panels/cards */
  --scalar-background-3: #2c3a4d;          /* raised / hover */
  --scalar-background-accent: #00aef026;

  --scalar-color-1: #f4f6f8;               /* O-White — primary text */
  --scalar-color-2: #c2d8f2;               /* Layer Gray — secondary text */
  --scalar-color-3: #8a9bb5;               /* tertiary */
  --scalar-color-accent: #00aef0;          /* full Layer Blue — pops on charcoal */

  --scalar-border-color: rgba(194, 216, 242, 0.14);

  --scalar-button-1: #00aef0;
  --scalar-button-1-color: #06222e;
  --scalar-button-1-hover: #33c0f4;

  --scalar-color-green:  #19dd96;          /* Carbon IQ */
  --scalar-color-blue:   #67a2f9;          /* Finance IQ */
  --scalar-color-red:    #e55555;          /* Risk IQ */
  --scalar-color-yellow: #f4aa40;          /* Energy IQ */
  --scalar-color-orange: #fc865e;          /* Build IQ */
  --scalar-color-purple: #c39af5;          /* End-of-Life IQ (legible mid-tone) */

  --scalar-scrollbar-color: rgba(194, 216, 242, 0.24);
  --scalar-scrollbar-color-active: rgba(194, 216, 242, 0.48);
}

/* ---------- SIDEBAR (inherits from the palette above) ---------- */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-2);
  --scalar-sidebar-item-hover-color: var(--scalar-color-accent);
  --scalar-sidebar-item-hover-background: var(--scalar-background-3);
  --scalar-sidebar-item-active-background: var(--scalar-background-3);
  --scalar-sidebar-border-color: var(--scalar-border-color);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-color-active: var(--scalar-color-accent);
  --scalar-sidebar-search-background: var(--scalar-background-1);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-color: var(--scalar-color-3);
}