/* Paul Roos Gimnasium (PRG) admin theme — mapped from brand guidelines 2024 */

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

  /* Brand */
  --color-primary: #930027;
  --color-primary-rgb: 147, 0, 39;
  --color-secondary: #001a33;
  --color-secondary-rgb: 0, 26, 51;
  --color-tertiary: #c98f00;
  --color-tertiary-rgb: 201, 143, 0;

  /* Status */
  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-warning: #c98f00;
  --color-warning-rgb: 201, 143, 0;
  --color-danger: #dc2626;
  --color-danger-rgb: 220, 38, 38;
  --color-info: #0057aa;
  --color-info-rgb: 0, 87, 170;

  /* Core surfaces (light) */
  --color-main-bg: #f4f7fb;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #e8f1f9;
  --color-surface-hover: color-mix(in srgb, var(--color-primary) 10%, #f4f7fb 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(0, 26, 51, 0.08));

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

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

  /* Buttons (light) */
  --color-button-primary-text: #ffffff;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-danger-text: #ffffff;

  /* Sidebar */
  --color-text-sidebar-item-active: #930027;
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-icon-sidebar-item-active: #930027;
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-chevron: var(--color-text-muted);
  --color-surface-sidebar-item-active: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --color-surface-sidebar-item-hover: color-mix(in srgb, var(--color-primary) 10%, transparent);

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

  /* Tour tooltip */
  --color-tour-tooltip-bg: #001a33 !important;
  --color-tour-tooltip-border: rgba(0, 26, 51, 0.08) !important;
  --color-tour-tooltip-title-text: #f4f7fb !important;
  --color-tour-tooltip-body-text: #bcd7f2 !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(0, 26, 51, 0.08) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f4f7fb !important;
  --color-tour-tooltip-button-skip-text: #bcd7f2 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  --color-success-soft: rgba(34, 197, 94, 0.16);
  --color-warning-soft: rgba(201, 143, 0, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-info-soft: rgba(0, 87, 170, 0.18);

  --color-status-success-text: #1e766c;
  --color-status-warning-text: #845e00;
  --color-status-info-text: #00468a;
  --color-status-danger-text: #b81d1d;
}

.dark {
  color-scheme: dark;

  --color-primary: #c23a5a;
  --color-primary-rgb: 194, 58, 90;
  --color-secondary: #001a33;
  --color-secondary-rgb: 0, 26, 51;
  --color-tertiary: #e0b03a;
  --color-tertiary-rgb: 224, 176, 58;

  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-warning: #e0b03a;
  --color-warning-rgb: 224, 176, 58;
  --color-danger: #dc2626;
  --color-danger-rgb: 220, 38, 38;
  --color-info: #4d8fd4;
  --color-info-rgb: 77, 143, 212;

  --color-status-success-text: var(--color-success);
  --color-status-warning-text: #e0b03a;
  --color-status-info-text: #86adff;
  --color-status-danger-text: #e76a6a;

  /* Soft fills follow the dark tone, not the light rgba baked on :root. */
  --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);

  --color-surface-ink: #000d1a;
  --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)
  );

  --color-text-primary: #eaf4f8;
  --color-text-secondary: #b8d4e0;
  --color-text-tertiary: #90b0c0;
  --color-text-muted: #6e8fa0;
  --color-text-faint: #506e7e;
  --color-text-inverse: #001a33;
  --color-text-on-accent: #ffffff;

  --color-text-sidebar-item-active: var(--color-primary);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-icon-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-chevron: var(--color-text-muted);
  --color-surface-sidebar-item-active: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-surface-sidebar-item-hover: color-mix(in srgb, var(--color-primary) 12%, transparent);

  --color-tabbar-item-active-icon: #c23a5a;
  --color-tabbar-item-active-text: #c23a5a;
  --color-tabbar-item-inactive-icon: var(--color-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-muted);

  --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);

  --color-button-primary-text: #ffffff;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-danger-text: #ffffff;

  --color-tour-tooltip-bg: #ffffff;
  --color-tour-tooltip-border: rgba(0, 26, 51, 0.08);
  --color-tour-tooltip-title-text: #0a2440;
  --color-tour-tooltip-body-text: #001a33;
  --color-tour-tooltip-button-primary-bg: #930027;
  --color-tour-tooltip-button-primary-text: #ffffff;
  --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(0, 26, 51, 0.08);
  --color-tour-tooltip-button-secondary-hover: var(--color-primary);
  --color-tour-tooltip-button-secondary-text: #001a33;
  --color-tour-tooltip-button-skip-text: #0a2440;
  --color-tour-tooltip-button-skip-hover: var(--color-primary);

  --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;

  --color-primary: #930027;
  --color-primary-rgb: 147, 0, 39;
  --color-secondary: #001a33;
  --color-secondary-rgb: 0, 26, 51;
  --color-tertiary: #c98f00;
  --color-tertiary-rgb: 201, 143, 0;

  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-warning: #c98f00;
  --color-warning-rgb: 201, 143, 0;
  --color-danger: #dc2626;
  --color-danger-rgb: 220, 38, 38;
  --color-info: #0057aa;
  --color-info-rgb: 0, 87, 170;

  --color-main-bg: #f4f7fb;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #e8f1f9;
  --color-surface-hover: color-mix(in srgb, var(--color-primary) 10%, #f4f7fb 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(0, 26, 51, 0.08));

  --color-text-primary: #001a33;
  --color-text-secondary: #0a2440;
  --color-text-tertiary: #1d3749;
  --color-text-muted: #3d5568;
  --color-text-faint: #627a8a;
  --color-text-inverse: #f4f7fb;
  --color-text-on-accent: #ffffff;

  --color-text-sidebar-item-active: #930027;
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-icon-sidebar-item-active: #930027;
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-chevron: var(--color-text-muted);
  --color-surface-sidebar-item-active: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --color-surface-sidebar-item-hover: color-mix(in srgb, var(--color-primary) 10%, transparent);

  --color-tabbar-item-active-icon: #930027;
  --color-tabbar-item-active-text: #930027;
  --color-tabbar-item-inactive-icon: var(--color-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-muted);

  --color-border-subtle: rgba(0, 26, 51, 0.08);
  --color-border-strong: rgba(0, 26, 51, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  --color-button-primary-text: #ffffff;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-danger-text: #ffffff;

  --color-tour-tooltip-bg: #001a33 !important;
  --color-tour-tooltip-border: rgba(0, 26, 51, 0.08) !important;
  --color-tour-tooltip-title-text: #f4f7fb !important;
  --color-tour-tooltip-body-text: #bcd7f2 !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(0, 26, 51, 0.08) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f4f7fb !important;
  --color-tour-tooltip-button-skip-text: #bcd7f2 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  --color-success-soft: rgba(34, 197, 94, 0.16);
  --color-warning-soft: rgba(201, 143, 0, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-info-soft: rgba(0, 87, 170, 0.18);
}