/*
 * Design tokens.
 *
 * 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-accent: #02759e;
  --color-accent-2: #60b546;
  --color-danger: #e63946;

  /* The INCEIF logo's two colours: its blue and the green "I". */
  --brand-gradient: linear-gradient(90deg, #04a4d6 0%, #60b546 100%);

  --topbar-height: 3.5rem;
  --footer-height: 2.25rem;
  --sidebar-width: 15.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);

  /* Backdrop behind a modal dialog (see components.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) */

  /* Primary filled button (sign-in, dialogs): the same
     high-contrast pair in both themes -- white on this INCEIF blue is >4.5:1 (5.2:1). */
  --color-primary: #02759e;
  --color-primary-hover: #025f80;
  --color-on-primary: #ffffff;

  /* Status badges (e.g. Shariah compliant / non-compliant on the Lists page):
     a tinted background and text dark enough to read on it (>= 4.5:1). */
  --color-success-bg: #e8f5e3;
  --color-success-text: #2f6b20;
  --color-danger-bg: #fdecee;
  --color-danger-text: #a61b29;
  --color-info-bg: #e1f3fa;
  --color-info-text: #035f80;
  /* Needs the user's input (e.g. a screening job awaiting clarification or documents). */
  --color-warning-bg: #fdf3dc;
  --color-warning-text: #8a5300;
}

@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-accent: #3cc2ec;
    --color-accent-2: #7ccd5f;
    --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-scrim: rgba(0, 0, 0, 0.55);
    --color-scrim-strong: rgba(0, 0, 0, 0.88);
    --color-primary: #02759e;
    --color-primary-hover: #025f80;
    --color-on-primary: #ffffff;
    --color-success-bg: rgba(124, 205, 95, 0.14);
    --color-success-text: #9fdc86;
    --color-danger-bg: rgba(255, 107, 107, 0.14);
    --color-danger-text: #ff9a9a;
    --color-info-bg: rgba(60, 194, 236, 0.16);
    --color-info-text: #8fdcf5;
    --color-warning-bg: rgba(245, 180, 60, 0.14);
    --color-warning-text: #f3c46e;
  }
}

: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-accent: #3cc2ec;
  --color-accent-2: #7ccd5f;
  --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-scrim: rgba(0, 0, 0, 0.55);
  --color-scrim-strong: rgba(0, 0, 0, 0.88);
  --color-primary: #02759e;
  --color-primary-hover: #025f80;
  --color-on-primary: #ffffff;

  --color-success-bg: rgba(124, 205, 95, 0.14);
  --color-success-text: #9fdc86;
  --color-danger-bg: rgba(255, 107, 107, 0.14);
  --color-danger-text: #ff9a9a;
  --color-info-bg: rgba(60, 194, 236, 0.16);
  --color-info-text: #8fdcf5;
  --color-warning-bg: rgba(245, 180, 60, 0.14);
  --color-warning-text: #f3c46e;
}