/* Origin tenant theme mapped from app palette for admin shell */

/* Light is the default */
:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #32c9b8;
  --color-primary-rgb: 50, 201, 184;
  --color-secondary: #01173e;
  --color-secondary-rgb: 1, 23, 62;
  --color-tertiary: #00daed;
  --color-tertiary-rgb: 0, 218, 237;

  /* Status */
  --color-success: #32c9b8;
  --color-success-rgb: 50, 201, 184;
  --color-warning: #db7f67;
  --color-warning-rgb: 219, 127, 103;
  --color-danger: #a42860;
  --color-danger-rgb: 164, 40, 96;
  --color-info: #00daed;
  --color-info-rgb: 0, 218, 237;

  /* Core surfaces (light) */
  --color-main-bg: #f5fafb;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #edf4f6;
  --color-surface-hover: color-mix(in srgb, var(--color-primary) 10%, #f5fafb 90%);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 14%, #ffffff 86%);
  --color-surface-glass: rgba(255, 255, 255, 0.75);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: color-mix(in srgb, var(--color-secondary) 18%, rgba(1, 23, 62, 0.08));

  /* Text (light) */
  --color-text-primary: #011028;
  --color-text-secondary: #0a2440;
  --color-text-tertiary: #1d3749;
  --color-text-muted: #3d5568;
  --color-text-faint: #627a8a;
  --color-text-inverse: #f0f8fb;
  --color-text-on-accent: #011028;

  /* Shared text scale tokens */
  --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);

  /* Borders (light) */
  --color-border-subtle: rgba(1, 23, 62, 0.08);
  --color-border-strong: rgba(1, 23, 62, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* Navigation: Sidebar item */
  --color-sidebar-item-active-icon: #c5d32d;
  --color-sidebar-item-active-text: #c5d32d;
  --color-sidebar-item-active-bg: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --color-sidebar-item-inactive-icon: var(--color-text-80);
  --color-sidebar-item-inactive-text: var(--color-text-80);
  --color-sidebar-item-hover-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);

  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: #c5d32d;
  --color-tabbar-item-active-text: #c5d32d;
  --color-tabbar-item-inactive-icon: var(--color-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-muted);

  /* Tour tooltip (dark version for light mode) */
  --color-tour-tooltip-bg: #00051e !important;
  --color-tour-tooltip-border: rgba(1, 23, 62, 0.08) !important;
  --color-tour-tooltip-title-text: #f0f8fb !important;
  --color-tour-tooltip-body-text: #c8dfe8 !important;
  --color-tour-tooltip-button-primary-bg: var(--color-primary) !important;
  --color-tour-tooltip-button-primary-text: var(--color-text-on-accent) !important;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000
  ) !important;
  --color-tour-tooltip-button-secondary-border: rgba(1, 23, 62, 0.08) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f0f8fb !important;
  --color-tour-tooltip-button-skip-text: #c8dfe8 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  /* Status soft (light) */
  --color-success-soft: rgba(50, 201, 184, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(164, 40, 96, 0.18);
  --color-info-soft: rgba(0, 218, 237, 0.18);
}

.dark {
  color-scheme: dark;

  /* Brand */
  --color-primary: #32c9b8;
  --color-primary-rgb: 50, 201, 184;
  --color-secondary: #01173e;
  --color-secondary-rgb: 1, 23, 62;
  --color-tertiary: #00daed;
  --color-tertiary-rgb: 0, 218, 237;

  /* Status */
  --color-success: #32c9b8;
  --color-success-rgb: 50, 201, 184;
  --color-warning: #db7f67;
  --color-warning-rgb: 219, 127, 103;
  --color-danger: #a42860;
  --color-danger-rgb: 164, 40, 96;
  --color-info: #00daed;
  --color-info-rgb: 0, 218, 237;

  /* Surfaces (dark) */
  --color-surface-ink: #00051e;
  --color-main-bg: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface-ink));
  --color-dark-grey: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-ink));
  --color-surface-app: color-mix(in srgb, var(--color-secondary) 23%, var(--color-surface-ink));
  --color-surface-card: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-ink));
  --color-surface-muted: color-mix(in srgb, var(--color-secondary) 20%, var(--color-surface-ink));
  --color-surface-hover: color-mix(in srgb, var(--color-secondary) 30%, rgba(255, 255, 255, 0.04));
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 20%,
    var(--color-surface-card)
  );
  --color-surface-glass: color-mix(in srgb, var(--color-surface-app) 78%, transparent);
  --color-surface-popover: color-mix(in srgb, var(--color-surface-card) 95%, transparent);
  --color-surface-overlay: color-mix(
    in srgb,
    var(--color-secondary) 28%,
    rgba(255, 255, 255, 0.06)
  );

  /* Text (dark) */
  --color-text-primary: #eaf4f8;
  --color-text-secondary: #b8d4e0;
  --color-text-tertiary: #90b0c0;
  --color-text-muted: #6e8fa0;
  --color-text-faint: #506e7e;
  --color-text-inverse: #011028;
  --color-text-on-accent: #011028;

  /* Shared text scale tokens */
  --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);

  /* Navigation: Sidebar item */
  --color-sidebar-item-active-icon: var(--color-primary);
  --color-sidebar-item-active-text: var(--color-primary);
  --color-sidebar-item-active-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-sidebar-item-inactive-icon: var(--color-text-80);
  --color-sidebar-item-inactive-text: var(--color-text-80);
  --color-sidebar-item-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);

  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: #c5d32d;
  --color-tabbar-item-active-text: #c5d32d;
  --color-tabbar-item-inactive-icon: var(--color-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-muted);

  /* Borders (dark) */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* Tour tooltip (invert for contrast) */
  --color-tour-tooltip-bg: #ffffff;
  --color-tour-tooltip-border: rgba(1, 23, 62, 0.08);
  --color-tour-tooltip-title-text: #0a2440;
  --color-tour-tooltip-body-text: #011028;
  --color-tour-tooltip-button-primary-bg: #32c9b8;
  --color-tour-tooltip-button-primary-text: #011028;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000
  );
  --color-tour-tooltip-button-secondary-border: rgba(1, 23, 62, 0.08);
  --color-tour-tooltip-button-secondary-hover: var(--color-primary);
  --color-tour-tooltip-button-secondary-text: #011028;
  --color-tour-tooltip-button-skip-text: #0a2440;
  --color-tour-tooltip-button-skip-hover: var(--color-primary);

  /* 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);
}

/* Keep .light identical to :root for any existing references */
.light {
  color-scheme: light;

  /* Brand */
  --color-primary: #32c9b8;
  --color-primary-rgb: 50, 201, 184;
  --color-secondary: #01173e;
  --color-secondary-rgb: 1, 23, 62;
  --color-tertiary: #00daed;
  --color-tertiary-rgb: 0, 218, 237;

  /* Status */
  --color-success: #32c9b8;
  --color-success-rgb: 50, 201, 184;
  --color-warning: #db7f67;
  --color-warning-rgb: 219, 127, 103;
  --color-danger: #a42860;
  --color-danger-rgb: 164, 40, 96;
  --color-info: #00daed;
  --color-info-rgb: 0, 218, 237;

  /* Core surfaces (light) */
  --color-main-bg: #f5fafb;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #edf4f6;
  --color-surface-hover: color-mix(in srgb, var(--color-primary) 10%, #f5fafb 90%);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 14%, #ffffff 86%);
  --color-surface-glass: rgba(255, 255, 255, 0.75);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: color-mix(in srgb, var(--color-secondary) 18%, rgba(1, 23, 62, 0.08));

  /* Text (light) */
  --color-text-primary: #011028;
  --color-text-secondary: #0a2440;
  --color-text-tertiary: #1d3749;
  --color-text-muted: #3d5568;
  --color-text-faint: #627a8a;
  --color-text-inverse: #f0f8fb;
  --color-text-on-accent: #011028;

  /* Shared text scale tokens */
  --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);

  /* Navigation: Sidebar item */
  --color-sidebar-item-active-icon: #c5d32d;
  --color-sidebar-item-active-text: #c5d32d;
  --color-sidebar-item-active-bg: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --color-sidebar-item-inactive-icon: var(--color-text-80);
  --color-sidebar-item-inactive-text: var(--color-text-80);
  --color-sidebar-item-hover-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);

  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: #c5d32d;
  --color-tabbar-item-active-text: #c5d32d;
  --color-tabbar-item-inactive-icon: var(--color-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-muted);

  /* Borders (light) */
  --color-border-subtle: rgba(1, 23, 62, 0.08);
  --color-border-strong: rgba(1, 23, 62, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* Tour tooltip (dark version for light mode) */
  --color-tour-tooltip-bg: #00051e !important;
  --color-tour-tooltip-border: rgba(1, 23, 62, 0.08) !important;
  --color-tour-tooltip-title-text: #f0f8fb !important;
  --color-tour-tooltip-body-text: #c8dfe8 !important;
  --color-tour-tooltip-button-primary-bg: var(--color-primary) !important;
  --color-tour-tooltip-button-primary-text: var(--color-text-on-accent) !important;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000
  ) !important;
  --color-tour-tooltip-button-secondary-border: rgba(1, 23, 62, 0.08) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f0f8fb !important;
  --color-tour-tooltip-button-skip-text: #c8dfe8 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  /* Status soft (light) */
  --color-success-soft: rgba(50, 201, 184, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(164, 40, 96, 0.18);
  --color-info-soft: rgba(0, 218, 237, 0.18);
}