/* V3 Design Tokens
/* V3 Design Tokens
 * - Light/Dark tokens
 * - Navbar background tokens from provided gradient + tileable starfield
 */

:root,
[data-theme="light"],
[data-bs-theme="light"] {
  /* Color scale tokens */
  --app-color-neutral-0: #ffffff;
  --app-color-neutral-50: #f6f8fc;
  --app-color-neutral-100: #f1f4fb;
  --app-color-neutral-200: #d9e1f0;
  --app-color-neutral-300: #c0cadb;
  --app-color-neutral-400: #8a96ad;
  --app-color-neutral-500: #5f6b85;
  --app-color-neutral-600: #46516a;
  --app-color-neutral-700: #2f3a54;
  --app-color-neutral-800: #1f2a44;
  --app-color-neutral-900: #141b2d;
  --app-color-neutral-950: #0d1220;

  --app-color-primary-50: #f1f2fb;
  --app-color-primary-100: #dedff3;
  --app-color-primary-200: #c4c7e7;
  --app-color-primary-300: #9fa5d4;
  --app-color-primary-400: #666da8;
  --app-color-primary-500: #272b5e;
  --app-color-primary-600: #20244f;
  --app-color-primary-700: #1a1d42;
  --app-color-primary-800: #151735;
  --app-color-primary-900: #101226;

  --app-color-accent-50: #fbf6eb;
  --app-color-accent-100: #f6ead2;
  --app-color-accent-200: #ecd5a4;
  --app-color-accent-300: #f1c58f;
  --app-color-accent-400: #d3ad63;
  --app-color-accent-500: #c49f57;
  --app-color-accent-600: #a98545;
  --app-color-accent-700: #8f7032;
  --app-color-accent-800: #735827;
  --app-color-accent-900: #5b462e;

  --app-color-success-500: #2f9e6f;
  --app-color-warning-500: #c38a2e;
  --app-color-danger-500: #c24949;

  /* Light semantic color tokens */
  --app-color-bg: var(--app-color-neutral-50);
  --app-color-surface: var(--app-color-neutral-0);
  --app-color-surface-alt: var(--app-color-neutral-100);
  --app-color-surface-muted: var(--app-color-neutral-200);
  --app-color-text: var(--app-color-neutral-800);
  --app-color-text-muted: var(--app-color-neutral-500);
  --app-color-text-subtle: var(--app-color-neutral-400);
  --app-color-border: var(--app-color-neutral-200);

  --app-color-primary: var(--app-color-primary-500);
  --app-color-primary-hover: var(--app-color-primary-600);
  --app-color-on-primary: var(--app-color-neutral-0);
  --app-color-accent: var(--app-color-accent-700);
  --app-color-accent-hover: var(--app-color-accent-800);
  --app-color-on-accent: var(--app-color-neutral-0);
  --app-footer-eyebrow-color: var(--app-color-accent-900);
  --app-footer-brand-glow: #272864;
  --app-footer-bg:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--app-color-accent) 18%, transparent), transparent 28rem),
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--app-footer-brand-glow) 46%, transparent), transparent 36rem),
    radial-gradient(circle at 82% 34%, color-mix(in srgb, var(--app-color-primary-400) 22%, transparent), transparent 34rem),
    linear-gradient(100deg, var(--app-color-neutral-950) 0%, var(--app-color-primary-900) 52%, var(--app-color-neutral-950) 100%);
  --app-footer-title-color: var(--app-color-accent-400);
  --app-footer-text-color: var(--app-navbar-text-muted);
  --app-footer-divider-color: color-mix(in srgb, var(--app-navbar-text) 16%, transparent);
  --app-footer-social-color: var(--app-color-accent-400);
  --app-footer-social-bg-hover: var(--app-color-accent-400);
  --app-footer-social-text-hover: var(--app-color-neutral-950);
  --app-color-success: var(--app-color-success-500);
  --app-color-warning: var(--app-color-warning-500);
  --app-color-danger: var(--app-color-danger-500);

  /* Button disabled (light: base colors are darker, use moderate tint) */
  --app-btn-disabled-bg-mix: 14%;
  --app-btn-disabled-fg-mix: 50%;
  --app-btn-disabled-border-mix: 22%;
  --app-btn-disabled-neutral-bg-mix: 88%;
  --app-btn-disabled-neutral-fg-mix: 92%;
  --app-btn-disabled-opacity: 1;

  /* Focus / accessibility */
  --app-focus-ring: 0 0 0 3px rgba(39, 43, 94, 0.35);

  /* Typography */
  --app-font-family: "Noto Sans TC", "Segoe UI", Arial, sans-serif;
  --app-font-size-100: 0.75rem;
  --app-font-size-200: 0.875rem;
  --app-font-size-300: 1rem;
  --app-font-size-400: 1.125rem;
  --app-font-size-500: 1.25rem;
  --app-font-size-600: 1.5rem;
  --app-font-size-700: 1.875rem;

  --app-line-height-tight: 1.3;
  --app-line-height-normal: 1.6;

  /* Spacing (8pt system) */
  --app-space-1: 0.25rem; /* 4 */
  --app-space-2: 0.5rem;  /* 8 */
  --app-space-3: 0.75rem; /* 12 */
  --app-space-4: 1rem;    /* 16 */
  --app-space-5: 1.5rem;  /* 24 */
  --app-space-6: 2rem;    /* 32 */
  --app-space-7: 2.5rem;  /* 40 */
  --app-space-8: 3rem;    /* 48 */

  /* Radius / shadow */
  --app-radius-sm: 0.25rem;  /* 4 */
  --app-radius-md: 0.5rem;   /* 8 */
  --app-radius-lg: 0.625rem; /* 10 */

  --app-shadow-1: 0 2px 8px rgba(24, 39, 75, 0.08);
  --app-shadow-2: 0 8px 24px rgba(24, 39, 75, 0.12);
  --app-text-shadow-on-image: 0 1px 2px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.45);
  --app-text-shadow-on-image-strong: 0 0 3px rgba(0, 0, 0, 0.95), 0 4px 14px rgba(0, 0, 0, 0.72);
  --app-icon-shadow-on-image: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  --app-backdrop-blur-sm: blur(4px);
  --app-backdrop-blur-md: blur(10px);

  /* Navbar background tokens (light) */
  --app-navbar-bg-image: url('../../img/pro/navbar/tileable_starfield_fixed.svg');
  --app-navbar-bg-image-size: 900px 730px;
  --app-navbar-bg-gradient: radial-gradient(
    circle at 8% 0%,
    color-mix(in srgb, var(--app-color-accent) 34%, transparent),
    transparent 28rem
  ), radial-gradient(
    circle at 50% 36%,
    color-mix(in srgb, var(--app-footer-brand-glow) 58%, transparent),
    transparent 34rem
  ), radial-gradient(
    circle at 82% 34%,
    color-mix(in srgb, var(--app-color-primary-400) 30%, transparent),
    transparent 32rem
  ), linear-gradient(
    100deg,
    rgba(13, 18, 32, 0.78) 0%,
    rgba(16, 18, 38, 0.74) 52%,
    rgba(13, 18, 32, 0.78) 100%
  );
  --app-navbar-bg: var(--app-navbar-bg-image), var(--app-navbar-bg-gradient);
  --app-tooter-bg-gradient: radial-gradient(
    ellipse at 0% -6%,
    rgba(234, 174, 104, 0.88) 5%,
    rgba(119, 131, 184, 0.82) 25%,
    rgba(60, 97, 199, 0.78) 45%,
    rgba(27, 35, 196, 0.72) 64%,
    rgba(79, 155, 179, 0.76) 100%
  );
  --app-tooter-bg: var(--app-navbar-bg-image), var(--app-tooter-bg-gradient);
  --app-navbar-text: #f7f9ff;
  --app-navbar-text-muted: #dbe4ff;

  /* Glass tokens */
  --app-glass-bg: rgba(255, 255, 255, 0.22);
  --app-glass-border: rgba(255, 255, 255, 0.42);
  --app-glass-shadow: 0 10px 30px rgba(20, 28, 48, 0.22);
  --app-hero-overlay-start: rgba(12, 18, 34, 0.18);
  --app-hero-overlay-end: rgba(12, 18, 34, 0.48);
  --app-template-hero-bg:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--app-color-accent) 16%, transparent), transparent 32rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--app-color-primary) 14%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--app-color-surface-alt), var(--app-color-bg));
  --app-card-border-strong: color-mix(in srgb, var(--app-color-border) 75%, #000 25%);

  /* Breakpoints */
  --app-breakpoint-sm: 576px;
  --app-breakpoint-md: 768px;
  --app-breakpoint-lg: 992px;
  --app-breakpoint-xl: 1200px;
  --app-breakpoint-xxl: 1400px;

  /* Motion */
  --app-motion-fast: 120ms;
  --app-motion-normal: 200ms;
  --app-motion-slow: 320ms;
  --app-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
  /* Dark semantic color tokens */
  --app-color-bg: var(--app-color-neutral-950);
  --app-color-surface: var(--app-color-neutral-900);
  --app-color-surface-alt: #1a2338;
  --app-color-surface-muted: var(--app-color-neutral-800);
  --app-color-text: #e9eefc;
  --app-color-text-muted: #b7c3e3;
  --app-color-text-subtle: #8fa0c4;
  --app-color-border: #2b3654;

  --app-color-primary: var(--app-color-primary-300);
  --app-color-primary-hover: var(--app-color-primary-200);
  --app-color-on-primary: var(--app-color-neutral-950);
  --app-color-accent: var(--app-color-accent-500);
  --app-color-accent-hover: var(--app-color-accent-400);
  --app-color-on-accent: var(--app-color-neutral-950);
  --app-footer-eyebrow-color: var(--app-color-accent);
  --app-footer-brand-glow: #272864;
  --app-footer-bg:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--app-color-accent) 18%, transparent), transparent 28rem),
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--app-footer-brand-glow) 46%, transparent), transparent 36rem),
    radial-gradient(circle at 82% 34%, color-mix(in srgb, var(--app-color-primary-400) 22%, transparent), transparent 34rem),
    linear-gradient(100deg, var(--app-color-neutral-950) 0%, var(--app-color-primary-900) 52%, var(--app-color-neutral-950) 100%);
  --app-footer-title-color: var(--app-color-accent);
  --app-footer-text-color: var(--app-navbar-text-muted);
  --app-footer-divider-color: color-mix(in srgb, var(--app-navbar-text) 16%, transparent);
  --app-footer-social-color: var(--app-color-accent);
  --app-footer-social-bg-hover: var(--app-color-accent);
  --app-footer-social-text-hover: var(--app-color-neutral-950);
  --app-color-success: #52c391;
  --app-color-warning: #e0b05a;
  --app-color-danger: #ee7c7c;

  /* Button disabled (dark: base colors are lighter, use weaker tint) */
  --app-btn-disabled-bg-mix: 8%;
  --app-btn-disabled-fg-mix: 34%;
  --app-btn-disabled-border-mix: 12%;
  --app-btn-disabled-neutral-bg-mix: 62%;
  --app-btn-disabled-neutral-fg-mix: 78%;
  --app-btn-disabled-opacity: 0.9;

  --app-focus-ring: 0 0 0 3px rgba(159, 165, 212, 0.4);

  --app-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --app-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
  --app-text-shadow-on-image: 0 1px 2px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.55);
  --app-text-shadow-on-image-strong: 0 0 3px rgba(0, 0, 0, 0.98), 0 4px 14px rgba(0, 0, 0, 0.82);
  --app-icon-shadow-on-image: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));

  /* Navbar background tokens (dark) */
  --app-navbar-bg-image: url('../../img/pro/navbar/tileable_starfield_fixed.svg');
  --app-navbar-bg-gradient: radial-gradient(
    circle at 8% 0%,
    color-mix(in srgb, var(--app-color-accent) 26%, transparent),
    transparent 28rem
  ), radial-gradient(
    circle at 50% 36%,
    color-mix(in srgb, var(--app-footer-brand-glow) 48%, transparent),
    transparent 34rem
  ), radial-gradient(
    circle at 82% 34%,
    color-mix(in srgb, var(--app-color-primary-400) 24%, transparent),
    transparent 32rem
  ), linear-gradient(
    100deg,
    rgba(13, 18, 32, 0.7) 0%,
    rgba(16, 18, 38, 0.66) 52%,
    rgba(13, 18, 32, 0.7) 100%
  );
  --app-navbar-bg: var(--app-navbar-bg-image), var(--app-navbar-bg-gradient);
  --app-tooter-bg-gradient: radial-gradient(
    ellipse at 0% -6%,
    rgba(234, 174, 104, 0.52) 5%,
    rgba(119, 131, 184, 0.46) 25%,
    rgba(60, 97, 199, 0.52) 45%,
    rgba(27, 35, 196, 0.62) 64%,
    rgba(79, 155, 179, 0.48) 100%
  );
  --app-tooter-bg: var(--app-navbar-bg-image), var(--app-tooter-bg-gradient);
  --app-navbar-text: #f2f6ff;
  --app-navbar-text-muted: #c9d7ff;

  /* Glass tokens */
  --app-glass-bg: rgba(18, 24, 42, 0.38);
  --app-glass-border: rgba(214, 224, 255, 0.25);
  --app-glass-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  --app-hero-overlay-start: rgba(6, 8, 16, 0.35);
  --app-hero-overlay-end: rgba(6, 8, 16, 0.62);
  --app-card-border-strong: color-mix(in srgb, var(--app-color-border) 80%, #000 20%);
}