/* ================================================================= */
/* Timeliness Design Tokens                                          */
/* Imported from the KromeOS design system (F1.2). Values mirror     */
/* KromeOS src/Ui/app/wwwroot/css/krome-tokens.css 1:1 (prefix       */
/* --tl-* instead of --krome-*) so a future re-sync is mechanical.   */
/* Themes layer via [data-theme]; `system` resolves to light/dark    */
/* client-side (see the boot script in App.razor).                   */
/* Pure palettes: light (:root) / dark / high-contrast (slice 1).    */
/* Textured palettes: aurora / topographic / mesh (slice 4).         */
/* ================================================================= */

:root {
  color-scheme: light;

  /* Brand */
  --tl-primary: #4F46E5;
  --tl-primary-hover: #4338CA;
  --tl-primary-light: #EEF2FF;
  --tl-secondary: #0EA5E9;
  --tl-secondary-hover: #0284C7;

  /* Semantic */
  --tl-success: #10B981;
  --tl-warning: #F59E0B;
  --tl-error: #EF4444;
  --tl-info: #3B82F6;

  /* Neutral scale (Slate) */
  --tl-gray-50: #F8FAFC;
  --tl-gray-100: #F1F5F9;
  --tl-gray-200: #E2E8F0;
  --tl-gray-300: #CBD5E1;
  --tl-gray-400: #94A3B8;
  --tl-gray-500: #64748B;
  --tl-gray-600: #475569;
  --tl-gray-700: #334155;
  --tl-gray-800: #1E293B;
  --tl-gray-900: #0F172A;
  --tl-gray-950: #020617;

  /* Surfaces */
  --tl-bg: #F8FAFC;
  --tl-bg-primary: var(--tl-bg);
  --tl-surface: #FFFFFF;
  --tl-border: #E2E8F0;
  --tl-hover: var(--tl-gray-100);
  --tl-text-primary: #0F172A;
  --tl-text-secondary: #475569;
  --tl-text-tertiary: #94A3B8;

  /* Shadows (subtle, Tailwind-style) */
  --tl-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tl-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --tl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Radius */
  --tl-radius-sm: 6px;
  --tl-radius-md: 8px;
  --tl-radius-lg: 12px;

  /* Typography */
  --tl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale — 4px base */
  --tl-space-0: 0;
  --tl-space-1: 4px;
  --tl-space-2: 8px;
  --tl-space-3: 12px;
  --tl-space-4: 16px;
  --tl-space-5: 20px;
  --tl-space-6: 24px;
  --tl-space-8: 32px;
  --tl-space-10: 40px;
  --tl-space-12: 48px;
  --tl-space-16: 64px;

  /* Transitions + easing curves */
  --tl-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tl-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --tl-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --tl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Focus ring (a11y) */
  --tl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tl-primary) 35%, transparent);
  --tl-focus-ring-offset: 2px;

  /* Responsive breakpoints */
  --tl-bp-sm: 640px;
  --tl-bp-md: 768px;
  --tl-bp-lg: 1024px;
  --tl-bp-xl: 1280px;

  /* Safe area (notched devices) */
  --tl-safe-area-top: env(safe-area-inset-top, 0px);
  --tl-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* Sidebar — theme-aware. Light keeps the dark-chrome slate look. */
  --tl-sidebar-bg: #0F172A;
  --tl-sidebar-bg-gradient: linear-gradient(180deg, #1E2532 0%, #1A1F2A 100%);
  --tl-sidebar-text: rgba(255, 255, 255, 0.65);
  --tl-sidebar-text-active: #60A5FA;
  --tl-sidebar-text-muted: rgba(255, 255, 255, 0.35);
  --tl-sidebar-accent: rgba(59, 130, 246, 0.15);
  --tl-sidebar-accent-bar: #3B82F6;
  --tl-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --tl-sidebar-border: rgba(255, 255, 255, 0.06);
  --tl-sidebar-scheme: dark;
}

[data-theme="dark"] {
  color-scheme: dark;

  --tl-primary: #818CF8;
  --tl-primary-hover: #6366F1;
  --tl-primary-light: #1E1B4B;
  --tl-secondary: #38BDF8;
  --tl-secondary-hover: #0EA5E9;

  --tl-success: #34D399;
  --tl-warning: #FBBF24;
  --tl-error: #F87171;
  --tl-info: #60A5FA;

  --tl-gray-50: #020617;
  --tl-gray-100: #0F172A;
  --tl-gray-200: #1E293B;
  --tl-gray-300: #334155;
  --tl-gray-400: #475569;
  --tl-gray-500: #64748B;
  --tl-gray-600: #94A3B8;
  --tl-gray-700: #CBD5E1;
  --tl-gray-800: #E2E8F0;
  --tl-gray-900: #F1F5F9;
  --tl-gray-950: #F8FAFC;

  --tl-bg: #0F172A;
  --tl-surface: #1E293B;
  --tl-border: #334155;
  --tl-text-primary: #F1F5F9;
  --tl-text-secondary: #94A3B8;
  --tl-text-tertiary: #64748B;

  --tl-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --tl-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --tl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --tl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

  --tl-sidebar-bg: #0B1220;
  --tl-sidebar-bg-gradient: linear-gradient(180deg, #0B1220 0%, #050912 100%);
  --tl-sidebar-text: rgba(241, 245, 249, 0.7);
  --tl-sidebar-text-active: #A5B4FC;
  --tl-sidebar-text-muted: rgba(241, 245, 249, 0.35);
  --tl-sidebar-accent: rgba(129, 140, 248, 0.18);
  --tl-sidebar-accent-bar: #818CF8;
  --tl-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --tl-sidebar-border: rgba(255, 255, 255, 0.05);
  --tl-sidebar-scheme: dark;
}

/* High-contrast — pure black/white surfaces, saturated accent (WCAG AAA). */
[data-theme="high-contrast"] {
  --tl-primary: #0040FF;
  --tl-primary-hover: #0030C0;
  --tl-primary-light: #E0E8FF;
  --tl-secondary: #006699;
  --tl-secondary-hover: #004D80;

  --tl-success: #007A33;
  --tl-warning: #B25E00;
  --tl-error: #B30000;
  --tl-info: #0040FF;

  --tl-gray-50: #FFFFFF;
  --tl-gray-100: #F5F5F5;
  --tl-gray-200: #DDDDDD;
  --tl-gray-300: #999999;
  --tl-gray-400: #666666;
  --tl-gray-500: #333333;
  --tl-gray-600: #1A1A1A;
  --tl-gray-700: #0D0D0D;
  --tl-gray-800: #000000;
  --tl-gray-900: #000000;
  --tl-gray-950: #000000;

  --tl-bg: #FFFFFF;
  --tl-surface: #FFFFFF;
  --tl-border: #000000;
  --tl-text-primary: #000000;
  --tl-text-secondary: #1A1A1A;
  --tl-text-tertiary: #333333;

  --tl-sidebar-bg: #FFFFFF;
  --tl-sidebar-bg-gradient: none;
  --tl-sidebar-text: #000000;
  --tl-sidebar-text-active: #0040FF;
  --tl-sidebar-text-muted: #333333;
  --tl-sidebar-accent: #E0E8FF;
  --tl-sidebar-accent-bar: #0040FF;
  --tl-sidebar-hover-bg: #F5F5F5;
  --tl-sidebar-border: #000000;
  --tl-sidebar-scheme: light;
}

/* ================================================================= */
/* Aurora — cosmic glassmorphism. Deep indigo base + vivid aurora    */
/* gradient blobs; translucent glass cards, neon glow shadows.       */
/* ================================================================= */
[data-theme="aurora"] {
  color-scheme: dark;

  --tl-primary: #C4B5FD;
  --tl-primary-hover: #A78BFA;
  --tl-primary-light: rgba(167, 139, 250, 0.18);
  --tl-secondary: #67E8F9;
  --tl-secondary-hover: #22D3EE;

  --tl-success: #6EE7B7;
  --tl-warning: #FCD34D;
  --tl-error: #FCA5A5;
  --tl-info: #93C5FD;

  --tl-gray-50: #050316;
  --tl-gray-100: #0A0726;
  --tl-gray-200: #170F3D;
  --tl-gray-300: #261B5C;
  --tl-gray-400: #3D2F80;
  --tl-gray-500: #6B5BAF;
  --tl-gray-600: #9286D1;
  --tl-gray-700: #BFB5E5;
  --tl-gray-800: #DED7F2;
  --tl-gray-900: #ECE6F9;
  --tl-gray-950: #FAF7FF;

  --tl-bg: #0A0726;
  --tl-surface: rgba(28, 18, 70, 0.38);
  --tl-border: rgba(196, 181, 253, 0.22);
  --tl-text-primary: #F5F0FF;
  --tl-text-secondary: #C9BFEC;
  --tl-text-tertiary: #9286D1;

  --tl-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --tl-shadow-sm: 0 0 12px rgba(167, 139, 250, 0.12), 0 2px 8px rgba(0, 0, 0, 0.4);
  --tl-shadow-md: 0 0 24px rgba(167, 139, 250, 0.16), 0 6px 16px rgba(0, 0, 0, 0.45);
  --tl-shadow-lg: 0 0 48px rgba(196, 181, 253, 0.22), 0 12px 28px rgba(10, 7, 38, 0.65);

  --tl-bg-image:
    radial-gradient(ellipse 95% 75% at 8% 14%, rgba(139, 92, 246, 0.92) 0%, rgba(139, 92, 246, 0) 55%),
    radial-gradient(ellipse 85% 70% at 92% 8%, rgba(236, 72, 153, 0.80) 0%, rgba(236, 72, 153, 0) 60%),
    radial-gradient(ellipse 100% 80% at 55% 100%, rgba(34, 211, 238, 0.75) 0%, rgba(34, 211, 238, 0) 55%),
    radial-gradient(ellipse 70% 60% at 78% 72%, rgba(196, 181, 253, 0.55) 0%, rgba(196, 181, 253, 0) 60%);

  --tl-sidebar-bg: rgba(10, 7, 38, 0.68);
  --tl-sidebar-bg-gradient: linear-gradient(180deg, rgba(15, 10, 50, 0.72) 0%, rgba(5, 3, 22, 0.6) 100%);
  --tl-sidebar-text: rgba(245, 240, 255, 0.78);
  --tl-sidebar-text-active: #E9DFFF;
  --tl-sidebar-text-muted: rgba(245, 240, 255, 0.4);
  --tl-sidebar-accent: rgba(196, 181, 253, 0.22);
  --tl-sidebar-accent-bar: #C4B5FD;
  --tl-sidebar-hover-bg: rgba(196, 181, 253, 0.12);
  --tl-sidebar-border: rgba(196, 181, 253, 0.16);
  --tl-sidebar-scheme: dark;
}

/* Aurora glass treatment — the sidebar blurs the gradient stack behind it. */
[data-theme="aurora"] .sidebar {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ================================================================= */
/* Topographic — editorial/scientific journal. Warm paper base,      */
/* serif headings, sharp 2px radii, hairline borders over shadows.   */
/* ================================================================= */
[data-theme="topographic"] {
  color-scheme: light;

  --tl-primary: #1A1A1A;
  --tl-primary-hover: #0A0A0A;
  --tl-primary-light: #E8E4D7;
  --tl-secondary: #0F4C5C;
  --tl-secondary-hover: #0B3A47;

  --tl-success: #2F6A3D;
  --tl-warning: #A55817;
  --tl-error: #8B1A1A;
  --tl-info: #0F4C5C;

  --tl-gray-50: #F7F4EC;
  --tl-gray-100: #EFEBDF;
  --tl-gray-200: #E1DBC9;
  --tl-gray-300: #C9C2AB;
  --tl-gray-400: #9C9479;
  --tl-gray-500: #706A53;
  --tl-gray-600: #4D483A;
  --tl-gray-700: #332F24;
  --tl-gray-800: #221F18;
  --tl-gray-900: #15130E;
  --tl-gray-950: #0B0A07;

  --tl-bg: #F5F2EA;
  --tl-surface: #FBF8EF;
  --tl-border: #C9C2AB;
  --tl-text-primary: #1A1A1A;
  --tl-text-secondary: #4D483A;
  --tl-text-tertiary: #706A53;

  --tl-radius-sm: 2px;
  --tl-radius-md: 2px;
  --tl-radius-lg: 4px;

  --tl-font-heading: 'Spectral', 'Crimson Pro', Georgia, 'Cambria', 'Times New Roman', serif;

  --tl-shadow-xs: none;
  --tl-shadow-sm: none;
  --tl-shadow-md: 0 1px 2px rgba(34, 31, 24, 0.06);
  --tl-shadow-lg: 0 2px 4px rgba(34, 31, 24, 0.08);

  --tl-bg-image: url("../images/textures/topographic.svg");
  --tl-bg-size: cover;
  --tl-bg-repeat: no-repeat;

  --tl-sidebar-bg: #F0ECDF;
  --tl-sidebar-bg-gradient: none;
  --tl-sidebar-text: rgba(34, 31, 24, 0.82);
  --tl-sidebar-text-active: #1A1A1A;
  --tl-sidebar-text-muted: rgba(34, 31, 24, 0.5);
  --tl-sidebar-accent: rgba(15, 76, 92, 0.10);
  --tl-sidebar-accent-bar: var(--tl-secondary);
  --tl-sidebar-hover-bg: rgba(34, 31, 24, 0.04);
  --tl-sidebar-border: #C9C2AB;
  --tl-sidebar-scheme: light;
}

/* Topographic editorial headings — serif + tightened tracking. */
[data-theme="topographic"] h1,
[data-theme="topographic"] h2,
[data-theme="topographic"] h3 {
    font-family: var(--tl-font-heading);
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* ================================================================= */
/* Mesh — designer canvas. Pale lavender base + vivid mesh-gradient  */
/* blobs; pillowy radii, shadow-only chrome, hot-pink brand.         */
/* ================================================================= */
[data-theme="mesh"] {
  color-scheme: light;

  --tl-primary: #DB2777;
  --tl-primary-hover: #BE185D;
  --tl-primary-light: #FCE7F3;
  --tl-secondary: #06B6D4;
  --tl-secondary-hover: #0891B2;

  --tl-success: #16A34A;
  --tl-warning: #F59E0B;
  --tl-error: #E11D48;
  --tl-info: #6366F1;

  --tl-gray-50: #FCFBFF;
  --tl-gray-100: #F5F3FF;
  --tl-gray-200: #E9E4FF;
  --tl-gray-300: #C8C0E8;
  --tl-gray-400: #9C92BD;
  --tl-gray-500: #6E6691;
  --tl-gray-600: #4D4670;
  --tl-gray-700: #332E4D;
  --tl-gray-800: #22203A;
  --tl-gray-900: #141327;
  --tl-gray-950: #0A0918;

  --tl-bg: #F2EDFF;
  --tl-surface: rgba(255, 255, 255, 0.70);
  --tl-border: transparent;
  --tl-text-primary: #1F1B3D;
  --tl-text-secondary: #4D4670;
  --tl-text-tertiary: #6E6691;

  --tl-radius-sm: 10px;
  --tl-radius-md: 14px;
  --tl-radius-lg: 20px;

  --tl-shadow-xs: 0 1px 2px rgba(34, 32, 58, 0.05);
  --tl-shadow-sm: 0 2px 8px rgba(34, 32, 58, 0.06);
  --tl-shadow-md: 0 6px 20px rgba(34, 32, 58, 0.08);
  --tl-shadow-lg: 0 16px 48px rgba(34, 32, 58, 0.12);

  --tl-bg-image:
    radial-gradient(ellipse 70% 60% at 10% 8%, rgba(132, 204, 22, 0.65) 0%, rgba(132, 204, 22, 0) 60%),
    radial-gradient(ellipse 75% 65% at 90% 12%, rgba(236, 72, 153, 0.70) 0%, rgba(236, 72, 153, 0) 60%),
    radial-gradient(ellipse 80% 65% at 85% 92%, rgba(34, 211, 238, 0.65) 0%, rgba(34, 211, 238, 0) 60%),
    radial-gradient(ellipse 70% 60% at 12% 88%, rgba(251, 191, 36, 0.62) 0%, rgba(251, 191, 36, 0) 60%);

  --tl-sidebar-bg: rgba(255, 255, 255, 0.55);
  --tl-sidebar-bg-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(245, 243, 255, 0.5) 100%);
  --tl-sidebar-text: rgba(34, 32, 58, 0.82);
  --tl-sidebar-text-active: #14132B;
  --tl-sidebar-text-muted: rgba(34, 32, 58, 0.5);
  --tl-sidebar-accent: color-mix(in srgb, var(--tl-primary) 16%, transparent);
  --tl-sidebar-accent-bar: var(--tl-primary);
  --tl-sidebar-hover-bg: rgba(219, 39, 119, 0.08);
  --tl-sidebar-border: transparent;
  --tl-sidebar-scheme: light;
}

/* Mesh glass sidebar — gradient bleeds through; bold headings. */
[data-theme="mesh"] .sidebar {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}
[data-theme="mesh"] h1,
[data-theme="mesh"] h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}