/*
 * 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;
  /* INCEIF logo blue (#04a4d6), one shade deeper so it reads as text on
     white (4.9:1). accent-2 stays teal: it marks "done / ok" states. */
  --color-accent: #037aa3;
  --color-accent-2: #00b894;
  --color-danger: #e63946;
  /* Status outlines (e.g. admin "saved / not set up yet" messages). */
  --color-success: #0f8a5f;
  --color-warning: #d0a900;

  /* The INCEIF logo's own blue and green: the wordmark gradient and
     decorative glows only, never text on its own. */
  --color-brand-blue: #04a4d6;
  --color-brand-green: #60b546;
  --brand-gradient: linear-gradient(90deg, var(--color-brand-blue) 0%, var(--color-brand-blue) 55%, var(--color-brand-green) 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 -- 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, account dialogs): the same
     high-contrast pair in both themes -- white on this deeper INCEIF
     blue is 4.9:1 (the logo's #04a4d6 itself is only 2.9:1). */
  --color-primary: #037aa3;
  --color-primary-hover: #02688b; /* a filled primary control under the pointer */
  --color-on-primary: #ffffff;

  /* Status badges and tints (job status, steps, notes): a tinted background and
     text dark enough to read on it (>= 4.5:1). Same values as iShariah, except
     info, which follows the INCEIF blue. */
  --color-success-bg: #e3f6ee;
  --color-success-text: #0b6b4a;
  --color-danger-bg: #fdecee;
  --color-danger-text: #a61b29;
  --color-info-bg: #e1f4fb;
  --color-info-text: #035f80;
  --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: #2ec0f0;
    --color-accent-2: #2dd4a7;
    --color-danger: #ff6b6b;
    --color-success: #2dd4a7;
    --color-warning: #e0c341;

    --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: #037aa3;
    --color-primary-hover: #02688b;
    --color-on-primary: #ffffff;

    --color-success-bg: rgba(45, 212, 167, 0.14);
    --color-success-text: #5fe0b9;
    --color-danger-bg: rgba(255, 107, 107, 0.14);
    --color-danger-text: #ff9a9a;
    --color-info-bg: rgba(46, 192, 240, 0.16);
    --color-info-text: #7fd4f2;
    --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: #2ec0f0;
  --color-accent-2: #2dd4a7;
  --color-danger: #ff6b6b;
  --color-success: #2dd4a7;
  --color-warning: #e0c341;

  --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: #037aa3;
  --color-primary-hover: #02688b;
  --color-on-primary: #ffffff;

  --color-success-bg: rgba(45, 212, 167, 0.14);
  --color-success-text: #5fe0b9;
  --color-danger-bg: rgba(255, 107, 107, 0.14);
  --color-danger-text: #ff9a9a;
  --color-info-bg: rgba(46, 192, 240, 0.16);
  --color-info-text: #7fd4f2;
  --color-warning-bg: rgba(245, 180, 60, 0.14);
  --color-warning-text: #f3c46e;
}