/*
 * tokens.css - design tokens for the IUCLID cloud service.
 *
 * Single source of truth for color, type, spacing and shadow values, following
 * the same pattern used in the decision_support (arbitrIQ) app: CSS custom
 * properties scoped to a theme attribute, so the rest of the stylesheet (and
 * Bootstrap, which we layer these on top of) only ever reference var(--token)
 * and never a raw hex value. Light is the default; [data-bs-theme="dark"]
 * overrides the same variable names, and app.js toggles that attribute.
 */

:root,
[data-bs-theme="light"] {
  /* Brand */
  --accent-primary: #2454eb;
  --accent-primary-hover: #1b3fc0;
  --accent-secondary: #0b9488;
  --accent-secondary-hover: #087a70;

  /* Surfaces */
  --bg-primary: #f5f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef1f7;
  --surface-muted: #f1f3f9;

  /* Text */
  --text-primary: #171a21;
  --text-secondary: #454b58;
  --text-muted: #6b7280;
  --text-on-accent: #ffffff;

  /* Borders */
  --border-color: #e3e6ed;
  --border-color-strong: #cbd0dc;

  /* Feedback */
  --success-bg: #dff5e6;
  --success-text: #14622f;
  --success-border: #b9e6c6;

  --warning-bg: #fff2cf;
  --warning-text: #7a5600;
  --warning-border: #f6dd97;

  --danger-bg: #fbdfe0;
  --danger-text: #8c1620;
  --danger-border: #f2b6ba;

  --info-bg: #dfe9ff;
  --info-text: #1c3fa0;
  --info-border: #b9cdfb;

  --orange-bg: #ffe6cc;
  --orange-text: #8a4a00;
  --orange-border: #f6c992;

  /* Elevation */
  --shadow-soft: 0 1px 2px rgba(23, 26, 33, 0.06), 0 1px 1px rgba(23, 26, 33, 0.04);
  --shadow-strong: 0 12px 28px rgba(23, 26, 33, 0.14);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --content-max-width: 1180px;
  --navbar-height: 64px;

  /* Type */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;

  color-scheme: light;
}

[data-bs-theme="dark"] {
  --accent-primary: #6f92ff;
  --accent-primary-hover: #91abff;
  --accent-secondary: #35c2b3;
  --accent-secondary-hover: #5ad2c5;

  --bg-primary: #10131c;
  --bg-secondary: #171b28;
  --bg-tertiary: #1f2434;
  --surface-muted: #1b2030;

  --text-primary: #eef0f6;
  --text-secondary: #b7bccb;
  --text-muted: #838ba1;
  --text-on-accent: #0b0e16;

  --border-color: #2a3042;
  --border-color-strong: #3a4257;

  --success-bg: #12301f;
  --success-text: #7bdb9c;
  --success-border: #204a30;

  --warning-bg: #3a2e0c;
  --warning-text: #f2cb5c;
  --warning-border: #55461a;

  --danger-bg: #3a1418;
  --danger-text: #f5a3aa;
  --danger-border: #56232a;

  --info-bg: #142244;
  --info-text: #a9c1ff;
  --info-border: #223561;

  --orange-bg: #3a2408;
  --orange-text: #f3ac5c;
  --orange-border: #55380f;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-strong: 0 16px 32px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Bootstrap 5.3 reads these root-level variables for a handful of components
   (spinner-border.text-primary, bg-primary/text-primary utilities, etc). Kept
   in sync with --accent-primary above so utility classes stay on-brand. */
:root,
[data-bs-theme] {
  --bs-primary: var(--accent-primary);
  --bs-primary-rgb: 36, 84, 235;
  --bs-link-color: var(--accent-primary);
  --bs-link-color-rgb: 36, 84, 235;
  --bs-link-hover-color: var(--accent-primary-hover);
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
}