/*
 * Brand Tokens — single edit point for deployment-level white-labeling.
 * Edit Layer A only to rebrand; do not edit downstream CSS files for color or font changes.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* Layer A — Brand knobs (white-label inputs)
   * PSApulse palette (from marketing site screenshot):
   *   primary  #3b7d23  forest green — CTA buttons, links
   *   secondary #2d6a1e  dark logo green — gradients, depth
   *   light    #5ba83a  leaf green — highlights, Sign Up accent
   *   surface  #edfdf3  mint wash — hero / section backgrounds
   */
  --brand-primary: #3b7d23;
  --brand-primary-hover: #2f6819;
  --brand-primary-light: #5ba83a;
  --brand-secondary: #2d6a1e;
  --brand-secondary-light: #6fcf4a;
  --brand-accent: #e8f5ec;
  --brand-accent-light: #edfdf3;
  --brand-danger: #c9706a;

  /* Layer A — Font knobs (white-label inputs) */
  --brand-font-primary: "DM Sans";
  --brand-font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Layer B — Semantic font tokens */
  --font-body: var(--brand-font-primary), var(--brand-font-fallback);
  --font-heading: var(--font-body);
  --font-mono: var(--brand-font-mono);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layer B — Semantic color tokens */
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-hover);
  --color-btn-primary-bg: var(--brand-primary);
  --color-btn-primary-hover: var(--brand-primary-hover);
  --color-btn-cancel-bg: var(--brand-danger);
  --color-btn-cancel-hover: color-mix(in srgb, var(--brand-danger) 82%, black);
  --color-navbar-active: var(--brand-primary);
  --color-focus-ring: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --color-gradient-start: var(--brand-primary-light);
  --color-gradient-end: var(--brand-secondary);
  --gradient-brand: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
  --gradient-brand-horizontal: linear-gradient(to right, var(--color-gradient-start), var(--color-gradient-end));
  --color-sidebar-gradient-start: color-mix(in srgb, var(--brand-primary-light) 90%, white);
  --color-sidebar-gradient-mid: var(--brand-primary);
  --color-sidebar-gradient-end: var(--brand-secondary);
  --color-sidebar-hover-accent: var(--brand-primary);
  --color-surface-brand: var(--brand-accent-light);
  --color-surface-brand-muted: var(--brand-accent);
  --color-brand-shadow: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  --color-brand-shadow-strong: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --color-brand-tint-10: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --color-brand-tint-15: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  --color-brand-tint-20: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --color-brand-tint-30: color-mix(in srgb, var(--brand-primary) 30%, transparent);

  /* Layer C — Neutral / status tokens */
  --color-text: #4b5563;
  --color-text-heading: #16161f;
  --color-text-muted: #717182;
  --color-text-dark: #16161f;
  --color-text-subtle: #6b7280;
  --color-border: #e5e7eb;
  --color-border-light: #e3e3ee;
  --color-border-auth: #e3e3ee;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-input-bg: #f9f9fc;
  --color-success: #3b7d23;
  --color-warning: #e07b00;
  --color-danger: var(--brand-danger);
  --color-danger-hover: color-mix(in srgb, var(--brand-danger) 82%, black);
  --color-danger-light: color-mix(in srgb, var(--brand-danger) 65%, white);
  --color-danger-muted: color-mix(in srgb, var(--brand-danger) 10%, transparent);
  --color-danger-border: color-mix(in srgb, var(--brand-danger) 70%, black);
  --color-danger-text: color-mix(in srgb, var(--brand-danger) 75%, black);
  --gradient-danger: linear-gradient(135deg, var(--color-danger-light) 0%, var(--color-danger) 100%);
  --color-logout-hover-bg: var(--color-danger-muted);

  /* Select / dropdown tokens (Select2 canonical style) */
  --select-height: 42px;
  --select-radius: var(--radius-sm, 4px);
  --select-border: #e0e0e0;
  --select-border-focus: var(--brand-secondary);
  --select-bg: var(--color-surface);
  --select-padding-x: 15px;
  --select-font-size: 14px;
  --select-filter-width: 220px;

  /* Dark-mode surface tokens (light theme defaults) */
  --color-bg-dark: #1a202c;
  --color-surface-dark: #2d3748;
  --color-text-on-dark: #e2e8f0;
  --color-border-dark: #4a5568;
  --color-navbar-dark: #111827;
  --color-navbar-dark-border: #374151;

  /* Legacy aliases — remove after full migration */
  --primary: var(--brand-primary);
  --primary-light: var(--brand-primary-hover);
  --secondary: var(--brand-secondary);
  --secondary-light: var(--brand-secondary-light);
  --accent: var(--brand-accent);
  --accent-light: var(--brand-accent-light);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --light: #ecf0f1;
  --dark: var(--color-text-heading);
  --gray: #95a5a6;
  --gray-light: #bdc3c7;
  --green-primary: var(--brand-primary);
  --green-hover: color-mix(in srgb, var(--brand-primary) 80%, transparent);
  --green-focus-ring: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --green-badge: color-mix(in srgb, var(--brand-primary) 82%, white);
  --orange-badge: rgba(224, 123, 0, 0.82);
  --text-muted: var(--color-text-muted);
  --text-dark: var(--color-text-dark);
  --border-color: var(--color-border-auth);
  --input-bg: var(--color-input-bg);

  /* Dark mode palette (used by dark-mode.css) */
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --dark-surface-2: #2d2d2d;
  --dark-primary: var(--brand-primary-light);
  --dark-secondary: var(--brand-primary);
  --dark-accent: var(--brand-accent-light);
  --dark-text: #e0e0e0;
  --dark-text-secondary: #aaaaaa;
  --dark-border: #333333;
  --dark-success: #81c784;
  --dark-warning: #ffb74d;
  --dark-danger: color-mix(in srgb, var(--brand-danger) 75%, white);
  --dark-info: #4dd0e1;
  --brand-primary-dark-mode: color-mix(in srgb, var(--brand-primary) 80%, black);
}

html,
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Dark mode flash prevention + semantic overrides */
html.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}