/* iBCare Company Dashboard — design tokens.
   Light is the base; dark redefines only the tokens, never the rules, so a
   colour can never exist in one theme and be missing in the other. */
:root {
  color-scheme: light dark;

  /* Brand — the teal is iBCare's existing primary (#278575). */
  --brand-900: #10403a;
  --brand-800: #16564c;
  --brand-700: #1b6f5e;
  --brand-600: #227a68;
  --brand:     #278575;
  --brand-400: #3fae98;
  --brand-300: #6ec9b6;
  --brand-100: #d6efe9;
  --brand-050: #eef8f5;

  /* Role accents — one per role, used for badges and dashboard headers. */
  --role-teal:   #278575;
  --role-indigo: #4f5bd5;
  --role-amber:  #b57614;
  --role-rose:   #b03a5b;

  /* Neutrals */
  --ink:        #101a19;
  --ink-2:      #33403e;
  --muted:      #667875;
  --line:       #dce5e3;
  --line-soft:  #eaf0ef;
  --surface:    #ffffff;
  --surface-2:  #f5f9f8;
  --canvas:     #eef3f2;

  /* Feedback */
  --danger:     #b3261e;
  --danger-bg:  #fdecea;
  --danger-line:#f3c3bf;
  --ok:         #1f7a4d;
  --ok-bg:      #e7f6ee;
  --warn:       #8a6100;
  --warn-bg:    #fdf3d8;

  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  22px;

  --shadow-sm: 0 1px 2px rgba(16,26,25,.06), 0 1px 3px rgba(16,26,25,.05);
  --shadow-md: 0 4px 12px rgba(16,26,25,.07), 0 2px 4px rgba(16,26,25,.05);
  --shadow-lg: 0 24px 48px -12px rgba(16,26,25,.18);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Explicit choice wins in both directions; bare :root above is the light
   palette, so a design that only ever sets one of these can't half-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #e9f0ee;
    --ink-2:     #bccac7;
    --muted:     #8ca09c;
    --line:      #24312f;
    --line-soft: #1b2624;
    --surface:   #131d1c;
    --surface-2: #0f1817;
    --canvas:    #0a1211;

    --brand-100: #17362f;
    --brand-050: #102925;

    --danger:    #ff8a80;
    --danger-bg: #2a1512;
    --danger-line:#4a201c;
    --ok:        #6ee7a8;
    --ok-bg:     #10261c;
    --warn:      #f0c14b;
    --warn-bg:   #2a2110;

    --role-indigo: #8b93f5;
    --role-amber:  #e0a942;
    --role-rose:   #e8809b;

    --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --ink:       #e9f0ee;
  --ink-2:     #bccac7;
  --muted:     #8ca09c;
  --line:      #24312f;
  --line-soft: #1b2624;
  --surface:   #131d1c;
  --surface-2: #0f1817;
  --canvas:    #0a1211;
  --brand-100: #17362f;
  --brand-050: #102925;
  --danger:    #ff8a80;
  --danger-bg: #2a1512;
  --danger-line:#4a201c;
  --ok:        #6ee7a8;
  --ok-bg:     #10261c;
  --warn:      #f0c14b;
  --warn-bg:   #2a2110;
  --role-indigo: #8b93f5;
  --role-amber:  #e0a942;
  --role-rose:   #e8809b;
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); }

/* One visible focus style everywhere. Never remove it without replacing it —
   keyboard users lose the page entirely. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}