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

  /* Core surfaces (light) */
  --color-main-bg: #f7fbf8;
  /* Keep layout surfaces consistent in light mode as well */
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #eef4f1;
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-primary) 10%,
    #f6fbf7 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(7, 24, 17, 0.08)
  );

  /* Text (light) */
  --color-text-primary: #031009;
  --color-text-secondary: #1c3025;
  --color-text-tertiary: #2f4a3c;
  --color-text-muted: #4a5b52;
  --color-text-faint: #6a7871;
  --color-text-inverse: #f5faf8;
  --color-text-on-accent: #0c1811;

  /* Borders (light) */
  --color-border-subtle: rgba(7, 24, 17, 0.08);
  --color-border-strong: rgba(7, 24, 17, 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: #030807 !important;
  --color-tour-tooltip-border: rgba(7, 24, 17, 0.08) !important;
  --color-tour-tooltip-title-text: #f5faf8 !important;
  --color-tour-tooltip-body-text: #d8efe3 !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(
    7,
    24,
    17,
    0.08
  ) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f5faf8 !important;
  --color-tour-tooltip-button-skip-text: #d8efe3 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;
  /* Status soft (light) */
  --color-success-soft: rgba(26, 211, 131, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(164, 40, 96, 0.18);
  --color-info-soft: rgba(55, 119, 255, 0.18);
}

.dark {
  color-scheme: dark;

  /* Brand */
  --color-primary: #1ad383;
  --color-primary-rgb: 26 211 131;
  --color-secondary: #058a4a;
  --color-secondary-rgb: 5 138 74;
  --color-tertiary: #3777ff;
  --color-tertiary-rgb: 55 119 255;

  /* Status */
  --color-success: #1ad383;
  --color-success-rgb: 26 211 131;
  --color-warning: #db7f67;
  --color-warning-rgb: 219 127 103;
  --color-danger: #a42860;
  --color-danger-rgb: 164 40 96;
  --color-info: #3777ff;
  --color-info-rgb: 55 119 255;

  /* Surfaces (dark) */
  /* Deep ink base used for consistent dark blending */
  --color-surface-ink: #071811;
  /* Medium brand-tinted dark surfaces (computed) */
  --color-main-bg: color-mix(
    in srgb,
    var(--color-secondary) 10%,
    var(--color-surface-ink)
  );
  /* Used by desktop sidebar + sticky desktop top bar (see default.layout.vue) */
  --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: #eef6f2;
  --color-text-secondary: #c8e0d5;
  --color-text-tertiary: #a8bdb3;
  --color-text-muted: #8fa19a;
  --color-text-faint: #6f7d77;
  --color-text-inverse: #0b130f;
  --color-text-on-accent: #0b130f;

  /* 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: var(--color-primary);
  --color-tabbar-item-active-text: var(--color-primary);
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-60);

  /* 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(7, 24, 17, 0.08);
  --color-tour-tooltip-title-text: #1c3025;
  --color-tour-tooltip-body-text: #031009;
  --color-tour-tooltip-button-primary-bg: #1ad383;
  --color-tour-tooltip-button-primary-text: #0b130f;
  --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(7, 24, 17, 0.08);
  --color-tour-tooltip-button-secondary-hover: var(--color-primary);
  --color-tour-tooltip-button-secondary-text: #031009;
  --color-tour-tooltip-button-skip-text: #1c3025;
  --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;

  /* Core surfaces (light) */
  --color-main-bg: #f7fbf8;
  /* Keep layout surfaces consistent in light mode as well */
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #eef4f1;
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-primary) 10%,
    #f6fbf7 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(7, 24, 17, 0.08)
  );

  /* Text (light) */
  --color-text-primary: #031009;
  --color-text-secondary: #1c3025;
  --color-text-tertiary: #2f4a3c;
  --color-text-muted: #4a5b52;
  --color-text-faint: #6a7871;
  --color-text-inverse: #f5faf8;
  --color-text-on-accent: #0c1811;

  /* 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) 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: var(--color-primary);
  --color-tabbar-item-active-text: var(--color-primary);
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-60);

  /* Borders (light) */
  --color-border-subtle: rgba(7, 24, 17, 0.08);
  --color-border-strong: rgba(7, 24, 17, 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: #030807 !important;
  --color-tour-tooltip-border: rgba(7, 24, 17, 0.08) !important;
  --color-tour-tooltip-title-text: #f5faf8 !important;
  --color-tour-tooltip-body-text: #d8efe3 !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(
    7,
    24,
    17,
    0.08
  ) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f5faf8 !important;
  --color-tour-tooltip-button-skip-text: #d8efe3 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;
  /* Status soft (light) */
  --color-success-soft: rgba(26, 211, 131, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(164, 40, 96, 0.18);
  --color-info-soft: rgba(55, 119, 255, 0.18);
}