/*
  Tenant theme: Acquifin
  - Brand primary:   #004bac
  - Brand secondary: #00bf63

  Notes:
  - The shell toggles `.dark` / `.light` on `html` + `body`.
  - Shared packages expect scale tokens like `--color-text-80/60`.
  - `global.css` uses `rgba(var(--color-*-rgb), <alpha>)`, so these `*-rgb`
    variables are defined as comma-separated triplets.
*/

:root {
  color-scheme: dark;

  /* Brand */
  --color-primary: #004bac;
  --color-primary-rgb: 0, 75, 172;
  --color-secondary: #00bf63;
  --color-secondary-rgb: 0, 191, 99;
  --color-tertiary: #3777ff;
  --color-tertiary-rgb: 55, 119, 255;

  /* Derived brand variants */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 82%, #000);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 18%, transparent);
  /* In dark mode, “strong” fills are kept light so `--color-text-inverse` (dark)
     remains readable on solid toasts/buttons. */
  --color-secondary-strong: color-mix(in srgb, var(--color-secondary) 72%, #fff);
  --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 16%, transparent);

  /* Accent aliases used by shared UI */
  --color-accent-primary: var(--color-secondary);
  --color-accent-primary-strong: var(--color-secondary-strong);
  --color-accent-secondary: var(--color-primary);
  --color-accent-secondary-strong: var(--color-primary-strong);

  /* Status */
  --color-success: var(--color-secondary);
  --color-success-rgb: var(--color-secondary-rgb);
  --color-success-strong: var(--color-secondary-strong);
  --color-success-soft: color-mix(in srgb, var(--color-success) 18%, transparent);

  --color-warning: #f2b84b;
  --color-warning-rgb: 242, 184, 75;
  --color-warning-strong: color-mix(in srgb, var(--color-warning) 78%, #fff);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 18%, transparent);

  --color-danger: #ff5b6b;
  --color-danger-rgb: 255, 91, 107;
  --color-danger-strong: color-mix(in srgb, var(--color-danger) 74%, #fff);
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, transparent);

  --color-info: var(--color-tertiary);
  --color-info-rgb: var(--color-tertiary-rgb);
  --color-info-strong: color-mix(in srgb, var(--color-info) 76%, #fff);
  --color-info-soft: color-mix(in srgb, var(--color-info) 16%, transparent);

  /* Surfaces (dark) — ink/navy */
  --color-main-bg: #142231;
  --color-surface-app: #19314b;
  --color-surface-card: #1b3654;
  --color-surface-muted: #172f46;
  --color-surface-hover: #214163;
  --color-surface-highlight: #26496e;
  --color-surface-glass: rgba(25, 49, 75, 0.72);
  --color-surface-popover: rgba(27, 54, 84, 0.92);
  --color-surface-overlay: rgba(0, 191, 99, 0.1);

  /* Topbar (primary background) */
  --color-surface-topbar: var(--color-primary);

  /* Text (dark) */
  --color-text-primary: #f3f7ff;
  --color-text-secondary: #c8d6ea;
  --color-text-tertiary: #9fb2cc;
  --color-text-muted: #7f95b0;
  --color-text-faint: #647b94;
  --color-text-inverse: #0b1117;
  --color-text-on-accent: #ffffff;

  /* Shared “text scale” tokens (used via var(--color-text-XX)) */
  --color-text-100: var(--color-text-primary);
  --color-text-90: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
  --color-text-80: color-mix(in srgb, var(--color-text-primary) 80%, transparent);
  --color-text-70: color-mix(in srgb, var(--color-text-primary) 70%, transparent);
  --color-text-60: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
  --color-text-50: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
  --color-text-40: color-mix(in srgb, var(--color-text-primary) 40%, transparent);

  /* Text/icons on topbar */
  --color-text-on-topbar: #ffffff;
  --color-icon-topbar: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb: color-mix(in srgb, var(--color-text-on-topbar) 82%, transparent);
  --color-text-topbar-breadcrumb-current: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb-separator: color-mix(
    in srgb,
    var(--color-text-on-topbar) 42%,
    transparent
  );

  /* Borders & focus */
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border: var(--color-border-subtle);
  --color-border-focus: rgba(0, 75, 172, 0.55);
  --shadow-focus: 0 0 0 3px rgba(0, 75, 172, 0.45);

  /* Sidebar */
  --color-surface-sidebar: var(--color-surface-app);
  --color-surface-sidebar-drawer: var(--color-surface-popover);
  --color-surface-sidebar-footer: var(--color-surface-muted);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-text-sidebar-item-active: var(--color-secondary);
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-item-active: var(--color-secondary);
  --color-icon-sidebar-chevron: var(--color-text-muted);

  /* Profile dropdown */
  --color-surface-profile-trigger: var(--color-surface-card);
  --color-border-profile-trigger: var(--color-border-subtle);
  --color-text-profile-trigger: var(--color-text-primary);
  --color-surface-profile-menu: var(--color-surface-popover);
  --color-surface-profile-menu-hover: var(--color-surface-hover);
  --color-text-profile-menu: var(--color-text-secondary);
  --color-text-profile-menu-muted: var(--color-text-muted);

  /* Gradients & shadows */
  --gradient-hero:
    radial-gradient(
      60% 60% at 70% 10%,
      color-mix(in srgb, var(--color-primary) 35%, transparent),
      transparent 65%
    ),
    radial-gradient(
      55% 55% at 20% 20%,
      color-mix(in srgb, var(--color-secondary) 32%, transparent),
      transparent 60%
    );
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary))
  );
  --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.42);
}

.light {
  color-scheme: light;

  /* In light mode, “strong” fills are darkened so `--color-text-inverse` (light)
     remains readable on solid toasts/buttons. */
  --color-secondary-strong: color-mix(in srgb, var(--color-secondary) 82%, #000);
  --color-accent-primary-strong: var(--color-secondary-strong);

  --color-warning-strong: color-mix(in srgb, var(--color-warning) 82%, #000);
  --color-danger-strong: color-mix(in srgb, var(--color-danger) 82%, #000);
  --color-info-strong: color-mix(in srgb, var(--color-info) 82%, #000);

  /* Surfaces (light) */
  --color-main-bg: #f4f7fb;
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #eaf0f8;
  --color-surface-hover: #e3ecf8;
  --color-surface-highlight: #d9e7fb;
  --color-surface-glass: rgba(255, 255, 255, 0.78);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: rgba(0, 191, 99, 0.08);

  /* Topbar (primary background) */
  --color-surface-topbar: var(--color-primary);

  /* Text (light) */
  --color-text-primary: #0f1b2a;
  --color-text-secondary: #2a3a50;
  --color-text-tertiary: #3a516b;
  --color-text-muted: #5c728c;
  --color-text-faint: #768aa2;
  --color-text-inverse: #f6f9ff;
  --color-text-on-accent: #ffffff;

  --color-text-100: var(--color-text-primary);
  --color-text-90: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
  --color-text-80: color-mix(in srgb, var(--color-text-primary) 80%, transparent);
  --color-text-70: color-mix(in srgb, var(--color-text-primary) 70%, transparent);
  --color-text-60: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
  --color-text-50: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
  --color-text-40: color-mix(in srgb, var(--color-text-primary) 40%, transparent);

  /* Topbar text/icons */
  --color-text-on-topbar: #ffffff;
  --color-icon-topbar: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb: color-mix(in srgb, var(--color-text-on-topbar) 82%, transparent);
  --color-text-topbar-breadcrumb-current: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb-separator: color-mix(
    in srgb,
    var(--color-text-on-topbar) 42%,
    transparent
  );

  /* Borders & focus */
  --color-border-subtle: rgba(15, 27, 42, 0.1);
  --color-border-strong: rgba(15, 27, 42, 0.18);
  --color-border: var(--color-border-subtle);
  --color-border-focus: rgba(0, 75, 172, 0.55);
  --shadow-focus: 0 0 0 3px rgba(0, 75, 172, 0.35);

  /* Status soft (light) */
  --color-success-soft: color-mix(in srgb, var(--color-success) 16%, transparent);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 18%, transparent);
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 18%, transparent);
  --color-info-soft: color-mix(in srgb, var(--color-info) 18%, transparent);

  /* Sidebar */
  --color-surface-sidebar: var(--color-surface-app);
  --color-surface-sidebar-drawer: var(--color-surface-popover);
  --color-surface-sidebar-footer: var(--color-surface-muted);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-text-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-chevron: var(--color-text-muted);

  /* Profile dropdown */
  --color-surface-profile-trigger: var(--color-surface-card);
  --color-border-profile-trigger: var(--color-border-subtle);
  --color-text-profile-trigger: var(--color-text-primary);
  --color-surface-profile-menu: var(--color-surface-popover);
  --color-surface-profile-menu-hover: var(--color-surface-hover);
  --color-text-profile-menu: var(--color-text-secondary);
  --color-text-profile-menu-muted: var(--color-text-muted);
}

/* Light mode: ensure readable text on brand primary backgrounds */
.light .bg-primary {
  color: var(--color-text-on-accent);
}

.light .bg-primary svg {
  fill: currentColor;
  stroke: currentColor;
}