/* Paul Roos Gimnasium (PRG) — brand colours from PRG Brand guidelines 2024
   Primary maroon #930027, secondary blue #0057AA, accent yellow #C98F00,
   light blue #BCD7F2, navy #001A33 */

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

  /* Brand */
  --color-primary: #930027;
  --color-primary-rgb: 147 0 39;
  --color-secondary: #0057aa;
  --color-secondary-rgb: 0 87 170;
  --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;

  /* Amount direction */
  --color-amount-in: #16a76a;
  --color-amount-out: #930027;

  /* 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: rgba(147, 0, 39, 0.04);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
  --color-surface-glass: rgba(255, 255, 255, 0.82);
  --color-surface-popover: rgba(255, 255, 255, 0.96);
  --color-surface-overlay: rgba(0, 26, 51, 0.06);

  /* Text (light) */
  --color-text-primary: #001a33;
  --color-text-secondary: color-mix(in srgb, #001a33 85%, #f4f7fb);
  --color-text-tertiary: color-mix(in srgb, #001a33 70%, #f4f7fb);
  --color-text-muted: color-mix(in srgb, #001a33 50%, #f4f7fb);
  --color-text-faint: color-mix(in srgb, #001a33 35%, #f4f7fb);
  --color-text-inverse: #f4f7fb;
  --color-text-on-accent: #ffffff;
  --accent-icon-invert: 0;

  /* 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: #001a33;
  --color-button-danger-text: #ffffff;

  /* Tour tooltip (dark version for light mode) */
  --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;
  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: #930027;
  --color-tabbar-item-active-text: #930027;
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-tertiary);
  /* Status soft (light) */
  --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-surface-topbar: var(--color-primary);
  --color-text-on-topbar: #ffffff;
  --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: #3d5568;
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-text-sidebar-item-active: #930027;
  --color-icon-sidebar-item: #3d5568;
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-item-active: #930027;
  --color-icon-sidebar-chevron: var(--color-text-muted);
  --color-surface-sidebar-item-active: color-mix(in srgb, #930027 14%, transparent);
  --color-surface-sidebar-item-hover: color-mix(in srgb, #930027 10%, transparent);
}

.dark {
  color-scheme: dark;

  /* Brand */
  --color-primary: #c23a5a;
  --color-primary-rgb: 194 58 90;
  --color-secondary: #4d8fd4;
  --color-secondary-rgb: 77 143 212;
  --color-tertiary: #e0b03a;
  --color-tertiary-rgb: 224 176 58;

  /* Status */
  --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;

  /* Amount direction */
  --color-amount-in: #1ad383;
  --color-amount-out: #fb7185;

  /* Surfaces (dark) — navy / maroon */
  --color-surface-ink: #000d1a;
  --color-main-bg: #001a33;
  --color-dark-grey: color-mix(
    in srgb,
    var(--color-primary) 18%,
    var(--color-surface-ink)
  );

  --color-surface-app: #0a2038;
  --color-surface-card: #122844;
  --color-surface-muted: #061828;
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-card));
  --color-surface-glass: rgba(18, 40, 68, 0.72);
  --color-surface-popover: rgba(18, 40, 68, 0.92);
  --color-surface-overlay: rgba(255, 255, 255, 0.08);

  /* Text (dark) */
  --color-text-primary: #eaf4f8;
  --color-text-secondary: color-mix(in srgb, var(--color-text-primary) 85%, var(--color-text-inverse));
  --color-text-tertiary: color-mix(in srgb, var(--color-text-primary) 70%, var(--color-text-inverse));
  --color-text-muted: color-mix(in srgb, var(--color-text-primary) 50%, var(--color-text-inverse));
  --color-text-faint: color-mix(in srgb, var(--color-text-primary) 35%, var(--color-text-inverse));
  --color-text-inverse: #001a33;
  --color-text-on-accent: #ffffff;

  --color-surface-topbar: #930027;
  --color-text-on-topbar: #ffffff;

  /* Lighter rose than primary (#c23a5a) for readable active nav on navy sidebar */
  --color-icon-sidebar-item-active: #fb7185;
  --color-text-sidebar-item-active: #fb7185;
  --color-surface-sidebar-item-active: color-mix(in srgb, #fb7185 18%, transparent);
  --color-icon-sidebar-item: #a8bdb3;
  --color-text-sidebar-item: #a8bdb3;
  --color-surface-sidebar-item-hover: color-mix(in srgb, #fb7185 12%, transparent);

  --color-tabbar-item-active-icon: #fb7185;
  --color-tabbar-item-active-text: #fb7185;
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-tertiary);

  --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: #eef6f2;
  --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: #001a33;
  --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: #001a33;
  --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) 28%, transparent), transparent 65%), radial-gradient(55% 55% at 20% 20%, color-mix(in srgb, var(--color-secondary) 24%, 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.55);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.45);

  --color-success-soft: rgba(34, 197, 94, 0.16);
  --color-warning-soft: rgba(224, 176, 58, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-info-soft: rgba(77, 143, 212, 0.18);
  --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-hover: var(--color-text-primary);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-chevron: var(--color-text-muted);
}

.light {
  color-scheme: light;

  --color-primary: #930027;
  --color-primary-rgb: 147 0 39;
  --color-secondary: #0057aa;
  --color-secondary-rgb: 0 87 170;
  --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-amount-in: #16a76a;
  --color-amount-out: #930027;

  --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: rgba(147, 0, 39, 0.04);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
  --color-surface-glass: rgba(255, 255, 255, 0.82);
  --color-surface-popover: rgba(255, 255, 255, 0.96);
  --color-surface-overlay: rgba(0, 26, 51, 0.06);

  --color-text-primary: #001a33;
  --color-text-secondary: color-mix(in srgb, #001a33 85%, #f4f7fb);
  --color-text-tertiary: color-mix(in srgb, #001a33 70%, #f4f7fb);
  --color-text-muted: color-mix(in srgb, #001a33 50%, #f4f7fb);
  --color-text-faint: color-mix(in srgb, #001a33 35%, #f4f7fb);
  --color-text-inverse: #f4f7fb;
  --color-text-on-accent: #ffffff;
  --accent-icon-invert: 0;

  --color-surface-topbar: var(--color-primary);
  --color-text-on-topbar: #ffffff;

  --color-icon-sidebar-item-active: #930027;
  --color-text-sidebar-item-active: #930027;
  --color-surface-sidebar-item-active: color-mix(in srgb, #930027 14%, transparent);
  --color-icon-sidebar-item: #3d5568;
  --color-text-sidebar-item: #3d5568;
  --color-surface-sidebar-item-hover: color-mix(in srgb, #930027 10%, transparent);

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

  --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: #001a33;
  --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);

  --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-hover: var(--color-text-primary);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-chevron: var(--color-text-muted);
}