/* Salesforce Lightning-inspired design tokens. Shared by shell + app pages. */
:root {
  --brand:        #0176d3;
  --brand-dark:   #014486;
  --brand-hover:  #005fb2;
  --brand-tint:   #eaf5fe;
  --bg:           #f3f3f3;
  --surface:      #ffffff;
  --surface-alt:  #fafaf9;
  --border:       #e5e5e5;
  --border-strong:#c9c9c9;
  --text:         #181818;
  --text-weak:    #5c6670;
  --text-invert:  #ffffff;
  --success:      #2e844a;
  --warning:      #fe9339;
  --danger:       #ea001e;
  --radius:       .25rem;
  --radius-lg:    .5rem;
  --shadow-1:     0 2px 4px rgba(0,0,0,.08);
  --shadow-2:     0 8px 24px rgba(0,0,0,.18);
  --shadow-win:   0 12px 40px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.12);
  --hover:        rgba(0,0,0,.08);
  --font: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, "PingFang TC",
          "Microsoft JhengHei", sans-serif;
}

[data-theme="dark"] {
  --brand:        #3d9be0;
  --brand-dark:   #7cc0f0;
  --brand-hover:  #5fb0ea;
  --brand-tint:   #14293c;
  --bg:           #131519;
  --surface:      #1e2126;
  --surface-alt:  #262a30;
  --border:       #343941;
  --border-strong:#4a505a;
  --text:         #e8eaed;
  --text-weak:    #9aa4ae;
  --success:      #58b378;
  --warning:      #ffa65c;
  --danger:       #ff5c5c;
  --shadow-1:     0 2px 4px rgba(0,0,0,.4);
  --shadow-2:     0 8px 24px rgba(0,0,0,.6);
  --shadow-win:   0 12px 40px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);
  --hover:        rgba(255,255,255,.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* SLDS-ish button */
.btn {
  font: inherit; font-weight: 600; font-size: .82rem;
  padding: .45rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--brand); cursor: pointer; line-height: 1;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--brand-tint); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }