/*
 * Design tokens.
 *
 * Palette from the INCEIF University logo: brand cyan #05a4d5 and brand
 * green #62b446 (--color-brand-*). They are used as they are where they are
 * decoration (the brand gradient, tree node fills); where a colour is text
 * or carries white text, a deeper shade of the same hue is used instead
 * (--color-accent, --color-primary, --color-accent-2), so contrast stays at
 * 4.5:1 or more. In dark mode the accents are lighter shades.
 *
 * Light palette lives on bare :root. Dark overrides live under
 * [data-theme="dark"] AND under prefers-color-scheme:dark guarded with
 * :not([data-theme="light"]), so:
 *   - no explicit choice yet  -> follows OS
 *   - explicit "light"        -> always light, even in a dark OS
 *   - explicit "dark"         -> always dark, even in a light OS
 */

:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f1f4;
  --color-border: #e0e2e8;
  --color-text: #1c1e26;
  --color-text-muted: #6b6f7b;
  --color-brand-cyan: #05a4d5;
  --color-brand-green: #62b446;
  --color-accent: #027ca8; /* brand cyan, deepened: 4.7:1 on white */
  --color-accent-2: #378429; /* brand green, deepened: 4.7:1 on white */
  --color-danger: #e63946;

  --brand-gradient: linear-gradient(90deg, #05a4d5 0%, #62b446 100%);

  --topbar-height: 3.5rem;
  --footer-height: 2.25rem;
  --sidebar-width: 18.5rem;
  --sidebar-width-collapsed: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 30, 0.08);

  --transition-fast: 150ms ease;
  --transition-medium: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  --color-node-deceased: #e63946;
  --color-node-heir: #05a4d5;
  /* Family tree after Step 2 runs: heirs it found Terhalang / Layak. */
  --color-node-blocked: #6b7280;
  --color-node-eligible: #378429;
  --color-node-incomplete-border: #d0a900;
  /* Notice (.notice in components.css, e.g. the heir disclaimers): a
     yellow caution box -- background, edge and text, text >7:1 on its fill. */
  --color-notice-bg: #fff6d1;
  --color-notice-border: #d0a900;
  --color-notice-text: #4d3d00;
  --color-edge: #9498a3;
  --color-edge-label: #6b6f7b;
  /* Lateral relationships (spouse, sibling -- same generation, no
     ancestor/descendant direction) are still drawn as directed edges
     (see family-tree.js) but in this color instead of --color-edge, so
     "peer-level" reads at a glance without needing a different line
     style (dashing) to do it. */
  --color-edge-lateral: #2f6feb;
  /* Both node fills above are saturated enough, in both themes, that a
     single constant works as the color drawn on top of them (the person
     icon inside each node circle -- see family-tree.js and the report's
     tree-svg.js). Still declared per-theme block per this file's own
     convention rather than assumed constant, in case a future palette
     tweak needs it to diverge. */
  --color-node-label-on-fill: #ffffff;
  /* The family tree's own state colours (both trees -- family-tree.css and
     the report's tree in report-doc.css -- nodes and their legend
     swatches): lighter shades of deceased / Layak / Terhalang than the
     --color-node-* ones above, so the rings around the person avatars are
     easy to tell apart. The --color-node-* ones stay as they are for
     everything else (status labels with white text, borders). The "not
     stated" icon sits on these light fills, so it is drawn dark. */
  --color-tree-node-deceased: #f4a1a6;
  --color-tree-node-eligible: #a3d68c;
  --color-tree-node-blocked: #c3c8d0;
  /* An heir who gave up their share (Tanazul, Steps 13-15): light orange. */
  --color-tree-node-tanazul: #ffc48a;
  --color-tree-node-icon-on-light: #2b2f3a;
  /* The family tree's canvas (behind the nodes), lighter than --color-surface-alt. */
  --color-tree-stage: #f8f9fb;

  /* Backdrop behind a modal dialog (see session-io.css) -- a dedicated
     token rather than an inline rgba() so light/dark get independently
     tuned opacity instead of one value that's wrong in one of them. */
  --color-scrim: rgba(20, 20, 30, 0.35);
  --color-scrim-strong: rgba(10, 10, 15, 0.82); /* behind a full-size image (admin image viewer) */

  /* Guided-input card's filled action button -- a fixed, high-contrast
     pair (white text on this deep cyan is 4.7:1 in both themes; the regular
     dark-theme --color-accent is too light to carry white text). */
  --color-guide-action: #027ca8;
  --color-guide-action-text: #ffffff;

  /* Primary filled button (Next, Proceed, sign-in, dialogs): the same
     high-contrast pair in both themes -- white on this deep cyan is 4.7:1. */
  --color-primary: #027ca8;
  --color-on-primary: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14151a;
    --color-surface: #1b1d24;
    --color-surface-alt: #22242c;
    --color-border: #2c2f39;
    --color-text: #e9eaee;
    --color-text-muted: #9498a3;
    --color-brand-cyan: #05a4d5;
    --color-brand-green: #62b446;
    --color-accent: #2bb8e6;
    --color-accent-2: #7cc95f;
    --color-danger: #ff6b6b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);

    --color-node-deceased: #ff6b6b;
    --color-node-heir: #2bb8e6;
    --color-node-blocked: #6b7280;
    --color-node-eligible: #378429;
    --color-node-incomplete-border: #e0c341;
    --color-notice-bg: #3a3112;
    --color-notice-border: #e0c341;
    --color-notice-text: #f5e7b0;
    --color-edge: #4a4e5a;
    --color-edge-label: #9498a3;
    --color-edge-lateral: #5b9dff;
    --color-node-label-on-fill: #ffffff;
    --color-tree-node-deceased: #ff9a9a;
    --color-tree-node-eligible: #8fd36f;
    --color-tree-node-blocked: #a3a9b4;
    --color-tree-node-tanazul: #ffb26b;
    --color-tree-node-icon-on-light: #1b1d24;
    --color-tree-stage: #22242c;
    --color-scrim: rgba(0, 0, 0, 0.55);
    --color-scrim-strong: rgba(0, 0, 0, 0.88);
    --color-guide-action: #027ca8;
    --color-guide-action-text: #ffffff;
    --color-primary: #027ca8;
    --color-on-primary: #ffffff;
  }
}

:root[data-theme="dark"] {
  --color-bg: #14151a;
  --color-surface: #1b1d24;
  --color-surface-alt: #22242c;
  --color-border: #2c2f39;
  --color-text: #e9eaee;
  --color-text-muted: #9498a3;
  --color-brand-cyan: #05a4d5;
  --color-brand-green: #62b446;
  --color-accent: #2bb8e6;
  --color-accent-2: #7cc95f;
  --color-danger: #ff6b6b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);

  --color-node-deceased: #ff6b6b;
  --color-node-heir: #2bb8e6;
  --color-node-blocked: #6b7280;
  --color-node-eligible: #378429;
  --color-node-incomplete-border: #e0c341;
  --color-notice-bg: #3a3112;
  --color-notice-border: #e0c341;
  --color-notice-text: #f5e7b0;
  --color-edge: #4a4e5a;
  --color-edge-label: #9498a3;
  --color-edge-lateral: #5b9dff;
  --color-node-label-on-fill: #ffffff;
  --color-tree-node-deceased: #ff9a9a;
  --color-tree-node-eligible: #8fd36f;
  --color-tree-node-blocked: #a3a9b4;
  --color-tree-node-tanazul: #ffb26b;
  --color-tree-node-icon-on-light: #1b1d24;
  --color-tree-stage: #22242c;
  --color-scrim: rgba(0, 0, 0, 0.55);
  --color-scrim-strong: rgba(0, 0, 0, 0.88);
  --color-guide-action: #027ca8;
  --color-guide-action-text: #ffffff;
  --color-primary: #027ca8;
  --color-on-primary: #ffffff;
}