/**
 * Pulse Global Theme - Twenty CRM v2.24.0 Brand Customization
 * Palette:
 *  - #F2EEE5 (Sand / Ivory)
 *  - #171817 (Obsidian Charcoal)
 *  - #0E5552 (Pulse Teal)
 *  - #D94A32 (Terracotta)
 *  - #E3B94F (Warm Gold)
 *  - #77766F (Slate Beige)
 *  - #504F4A (Dark Gray for small text)
 */

:root,
:root.light,
[data-theme="light"] {
  /* Pulse Palette Variables */
  --pulse-sand: #F2EEE5;
  --pulse-charcoal: #171817;
  --pulse-teal: #0E5552;
  --pulse-terracotta: #D94A32;
  --pulse-gold: #E3B94F;
  --pulse-slate: #77766F;
  --pulse-dark-gray: #504F4A;

  /* Twenty Theme Variable Overrides */
  --t-background-primary: #FFFFFF;
  --t-background-secondary: #F8F6F1;
  --t-background-tertiary: var(--pulse-sand);
  --t-background-quaternary: #EAE6DC;

  --t-font-color-primary: var(--pulse-charcoal);
  --t-font-color-secondary: var(--pulse-dark-gray);
  --t-font-color-tertiary: var(--pulse-dark-gray);
  --t-font-color-extra-light: var(--pulse-slate);
  --t-font-color-danger: var(--pulse-terracotta);
  --t-font-color-inverted: #FFFFFF;

  --t-border-color-light: #E5E0D6;
  --t-border-color-medium: #D4CEBF;
  --t-border-color-strong: var(--pulse-slate);

  --t-accent-primary: var(--pulse-teal);
  --t-accent-secondary: var(--pulse-gold);
  --t-accent-tertiary: var(--pulse-terracotta);
  --t-accent-quaternary: var(--pulse-slate);

  --t-color-blue: var(--pulse-teal);
  --t-color-blue9: var(--pulse-teal);
  --t-color-green: var(--pulse-teal);
  --t-color-red: var(--pulse-terracotta);
  --t-color-amber: var(--pulse-gold);
  --t-color-yellow: var(--pulse-gold);

  /* Accessibility focus ring tokens */
  --pulse-focus-ring-color: var(--pulse-teal);
  --pulse-focus-ring-width: 2px;
  --pulse-focus-ring-offset: 2px;
}

/* Global Shell & Canvas Surfaces - Light Mode Ivory (#F2EEE5) */
html:not(.dark),
body:not(.dark),
:root:not(.dark) body,
:root:not(.dark) #root,
:root:not(.dark) main,
:root:not(.dark) [role="main"],
:root:not(.dark) [class*="layout"],
:root:not(.dark) [class*="shell"],
:root:not(.dark) [class*="page"],
:root:not(.dark) [class*="wrapper"] {
  background-color: var(--pulse-sand) !important;
  color: var(--pulse-charcoal);
}

/* Dark Mode Theme Tokens & Canvas (#171817) */
:root.dark,
.dark,
[data-theme="dark"] {
  --t-background-primary: var(--pulse-charcoal);
  --t-background-secondary: #1F2120;
  --t-background-tertiary: #131413;
  --t-background-quaternary: #2B2D2B;

  --t-font-color-primary: var(--pulse-sand);
  --t-font-color-secondary: #D4CEBF;
  --t-font-color-tertiary: #B5B0A4;
  --t-font-color-extra-light: var(--pulse-slate);
  --t-font-color-danger: #E86B56;
  --t-font-color-inverted: var(--pulse-charcoal);

  --t-border-color-light: #2D302E;
  --t-border-color-medium: #3A3D3A;
  --t-border-color-strong: var(--pulse-slate);

  --t-accent-primary: #12726E;
  --t-accent-secondary: var(--pulse-gold);

  --pulse-focus-ring-color: #12726E;
}

html.dark,
body.dark,
:root.dark body,
:root.dark #root,
:root.dark main,
:root.dark [role="main"],
:root.dark [class*="layout"],
:root.dark [class*="shell"],
:root.dark [class*="page"],
:root.dark [class*="wrapper"] {
  background-color: var(--pulse-charcoal) !important;
  color: var(--pulse-sand) !important;
}

/* Ensure Cards, Modals, Forms & Input Fields Maintain High Contrast */
:root:not(.dark) form,
:root:not(.dark) input,
:root:not(.dark) select,
:root:not(.dark) textarea,
:root:not(.dark) [role="dialog"],
:root:not(.dark) [class*="card"],
:root:not(.dark) [class*="Card"],
:root:not(.dark) [class*="modal"],
:root:not(.dark) [class*="Modal"],
:root:not(.dark) [class*="paper"],
:root:not(.dark) [class*="box"] {
  background-color: #FFFFFF;
}

:root:not(.dark) input,
:root:not(.dark) select,
:root:not(.dark) textarea {
  color: var(--pulse-charcoal);
  border-color: var(--t-border-color-medium, #D4CEBF);
}

/* 1. Small Text Accessibility (#504F4A for small texts in light mode) */
:root:not(.dark) small,
:root:not(.dark) caption,
:root:not(.dark) figcaption,
:root:not(.dark) label,
:root:not(.dark) .small,
:root:not(.dark) [class*="caption"],
:root:not(.dark) [class*="subtitle"],
:root:not(.dark) [class*="text-sm"],
:root:not(.dark) [class*="text-xs"],
:root:not(.dark) [class*="Text-sm"],
:root:not(.dark) [class*="Text-xs"] {
  color: var(--pulse-dark-gray);
}

/* 2. Accessible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: var(--pulse-focus-ring-width) solid var(--pulse-focus-ring-color) !important;
  outline-offset: var(--pulse-focus-ring-offset) !important;
  box-shadow: 0 0 0 4px rgba(14, 85, 82, 0.2) !important;
}

/* 3. Motion Accessibility (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Sidebar & Topbar Semantic Styling */
aside,
[role="navigation"],
nav {
  border-right: 1px solid var(--t-border-color-medium);
}

header,
[role="banner"] {
  border-bottom: 1px solid var(--t-border-color-medium);
}

/* Navigation active items */
[aria-current="page"],
[aria-selected="true"],
nav a[class*="active"],
aside a[class*="active"] {
  background-color: rgba(14, 85, 82, 0.08) !important;
  color: var(--pulse-teal) !important;
  font-weight: 600 !important;
}

/* 5. Auth / Sign-In Styling */
form,
[class*="auth"],
[class*="signin"],
[class*="login"] {
  --t-accent-primary: var(--pulse-teal);
}

button[type="submit"],
button[class*="primary"],
button[class*="Primary"] {
  background-color: var(--pulse-teal) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

button[type="submit"]:hover,
button[class*="primary"]:hover,
button[class*="Primary"]:hover {
  background-color: #0B4441 !important;
}