/* Zabulan brand palette and design tokens.
   Colors are themed (dark / light); shape & layout tokens are shared.
   Resolution order:
     1. Shared tokens in :root
     2. Default colors via prefers-color-scheme (before JS runs)
     3. Explicit [data-theme="dark"|"light"] override (set by theme.ts) wins
*/

:root {
  /* Shape & layout (theme-independent) */
  --radius:        10px;
  --radius-lg:     18px;
  --radius-pill:   999px;
  --maxw:          1320px;
  --maxw-text:     760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Dark theme (brand default) ---- */
:root,
:root[data-theme="dark"] {
  --bg:            #28282c;   /* RGB(40,40,44) */
  --bg-elevated:   #313137;
  --bg-modal:      #1f1f23;
  --bg-overlay:    rgba(16, 16, 19, 0.78);

  --text:          #ffffff;
  --text-muted:    #b8b8be;
  --text-dim:      #8a8a92;

  --gray-700:      #3a3a40;
  --gray-600:      #4a4a52;
  --gray-500:      #6e6e76;
  --gray-300:      #9a9aa2;

  --accent-cyan:     #7fd4f5;
  --accent-cyan-ink: #0c2733;
  --role-grad-from:  #3a73aa;
  --role-grad-to:    #1a3a5c;

  --danger:        #ff6b6b;
  --success:       #5fd0a0;

  --shadow-1:      0 2px 8px rgba(0,0,0,0.35);
  --shadow-2:      0 10px 40px rgba(0,0,0,0.5);
}

/* ---- Light theme ---- */
:root[data-theme="light"] {
  --bg:            #f4f5f7;   /* soft off-white page */
  --bg-elevated:   #ffffff;   /* cards / topbar / footer */
  --bg-modal:      #ffffff;
  --bg-overlay:    rgba(20, 24, 32, 0.45);

  --text:          #1c1f26;   /* near-black ink */
  --text-muted:    #565b66;
  --text-dim:      #858b96;

  /* "gray-700" etc. are used as borders/dividers in dark; in light they
     become light hairlines and mid greys so existing rules still read well. */
  --gray-700:      #e2e5ea;   /* hairline borders */
  --gray-600:      #cfd4dc;   /* stronger borders / inputs */
  --gray-500:      #aab0ba;
  --gray-300:      #7d838d;

  /* Cyan is too pale on white; deepen the accent and its ink for contrast. */
  --accent-cyan:     #1f7fb0;
  --accent-cyan-ink: #ffffff;
  --role-grad-from:  #3a73aa;
  --role-grad-to:    #1f4d78;

  --danger:        #c0392b;
  --success:       #1d8a5e;

  --shadow-1:      0 1px 3px rgba(20,24,32,0.10), 0 2px 8px rgba(20,24,32,0.06);
  --shadow-2:      0 10px 36px rgba(20,24,32,0.16);
}

/* Follow the OS preference when the user hasn't explicitly chosen.
   (theme.ts sets data-theme explicitly once a choice exists.) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:            #f4f5f7;
    --bg-elevated:   #ffffff;
    --bg-modal:      #ffffff;
    --bg-overlay:    rgba(20, 24, 32, 0.45);
    --text:          #1c1f26;
    --text-muted:    #565b66;
    --text-dim:      #858b96;
    --gray-700:      #e2e5ea;
    --gray-600:      #cfd4dc;
    --gray-500:      #aab0ba;
    --gray-300:      #7d838d;
    --accent-cyan:     #1f7fb0;
    --accent-cyan-ink: #ffffff;
    --role-grad-from:  #3a73aa;
    --role-grad-to:    #1f4d78;
    --danger:        #c0392b;
    --success:       #1d8a5e;
    --shadow-1:      0 1px 3px rgba(20,24,32,0.10), 0 2px 8px rgba(20,24,32,0.06);
    --shadow-2:      0 10px 36px rgba(20,24,32,0.16);
  }
}

/* Smooth the switch. */
body, .topbar, .footer, .card, .service-card, .svc-card-inner,
.modal, .expect-col, .aside-card, .step-card, .highlight, .detail-hero {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}