/**
* This file would be included at the root of our app
*/

/* This will contain the global colors and values of our app */
:root {
	color-scheme: light;
	/* Theme colors — legacy --batterii-* hued tokens are DEPRECATED and aliased to their modern targets; kept so in-flight branches keep resolving. */
	--batterii-green: var(--green-vurvey-500);
	--batterii-navy: var(--gray-modern-800);
	--batterii-navy-medium: var(--gray-modern-700);
	/* DEPRECATED: retiring in favor of --purple-brand-500. Kept as an alias so in-flight branches that still reference var(--batterii-purple) keep resolving;. */
	--batterii-purple: var(--purple-brand-500);
	--batterii-red: var(--red-500);
	--batterii-coral: var(--red-400);
	--batterii-magenta: var(--purple-brand-500);
	--batterii-yellow: var(--volt-400);
	--batterii-yellow-tip: var(--neutral-200);
	--batterii-brand-yellow: var(--volt-500);
	--batterii-hot-pink: var(--red-500);
	--batterii-light-teal: var(--gray-modern-100);
	--batterii-teal: var(--gray-modern-400);

	--batterii-green-faded: rgba(34, 197, 129, 0.15);
	--batterii-purple-faded: color-mix(in srgb, var(--purple-brand-500) 15%, transparent);
	--batterii-red-faded: rgba(244, 49, 49, 0.15);
	--batterii-white-faded: rgba(255, 255, 255, 0.2);
	/* Colors from the newest wireframes (maybe won't be final?) */
	--batterii-blue: var(--blue-dark-500);
	--batterii-green-two: var(--green-vurvey-500);

	/* diffrent opacity levels of black */
	--batterii-black-1: rgba(0, 0, 0, 0.1);
	--batterii-black-2: rgba(0, 0, 0, 0.2);
	--batterii-black-5: rgba(0, 0, 0, 0.5);
	--batterii-black-8: rgba(0, 0, 0, 0.8);

	--element-shadow: 1px 3px 4px 1px var(--neutral-200);
	/* grayscale — DEPRECATED aliases: retiring into --neutral-*, kept so in-flight branches that still reference these keep resolving. */
	--batterii-white: var(--neutral-0);
	--batterii-black: var(--neutral-950);
	--batterii-black-lighter: var(--neutral-925);
	--batterii-grey-extradark: var(--neutral-700);
	--batterii-grey-dark: var(--neutral-500);
	--batterii-grey-medium: var(--neutral-500);
	--batterii-grey-light: var(--neutral-400);
	--batterii-grey: var(--neutral-300);
	--batterii-grey-extralight: var(--neutral-200);
	--batterii-grey-white: var(--neutral-100);
	--batterii-white-smoke: var(--neutral-100);
	--auth0-dark-blue: #1b1b22;

	/* Static height or width values of global elements*/
	--top-nav-height: 60px;
	--left-nav-width: 66px;
	--expanded-nav-width: 240px;
	--top-banner-height: 48px;
	--left-panel-width: 280px;
	--right-panel-width: 400px;

	/* V2 CSS Variables */

	--sidebar-width: 248px;

	/* Mobile-specific variables */
	--mobile-sidebar-width: 280px;
	--mobile-header-height: 60px;
	--mobile-touch-target: 44px;
	--mobile-safe-area-top: env(safe-area-inset-top, 0px);
	--mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--mobile-safe-area-left: env(safe-area-inset-left, 0px);
	--mobile-safe-area-right: env(safe-area-inset-right, 0px);

	/* Font family */
	--font-inter: "Inter";
	/*  Geist families + type primitives. */
	--font-geist: "Geist", sans-serif;
	--font-geist-mono: "Geist Mono", monospace;

	/* Size / line-height scale — rem = px ÷ 10 (production root = 10px) */
	--type-size-2xs: 1rem;
	--type-leading-2xs: 1.4rem; /* 10 / 14 */
	--type-size-xs: 1.2rem;
	--type-leading-xs: 1.6rem; /* 12 / 16 */
	--type-size-sm: 1.4rem;
	--type-leading-sm: 2rem; /* 14 / 20 */
	--type-size-base: 1.6rem;
	--type-leading-base: 2.4rem; /* 16 / 24 */
	--type-size-lg: 2rem;
	--type-leading-lg: 2.8rem; /* 20 / 28 */
	--type-size-xl: 2.4rem;
	--type-leading-xl: 3.2rem; /* 24 / 32 */
	--type-size-2xl: 3rem;
	--type-leading-2xl: 3.6rem; /* 30 / 36 */
	--type-size-3xl: 3.6rem;
	--type-leading-3xl: 4rem; /* 36 / 40 */
	--type-size-5xl: 4.8rem;
	--type-leading-5xl: 5.6rem; /* 48 / 56 */

	--type-weight-regular: 400;
	--type-weight-medium: 500;
	--type-weight-semibold: 600;

	/* Spacings */
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-36: 36px;
	--space-40: 40px;
	--space-46: 46px;
	--space-48: 48px;
	--space-64: 64px;
	--space-74: 74px;
	--space-124: 124px;

	/* Border radius variables */
	--radius-0: 0;
	--radius-0-5: var(--space-2);
	--radius-1: var(--space-4);
	--radius-1-5: var(--space-6);
	--radius-2: var(--space-8);
	--radius-2-5: var(--space-10);
	--radius-3: var(--space-12);
	--radius-4: var(--space-16);
	--radius-5: var(--space-20);
	--radius-6: var(--space-24);
	--radius-8: var(--space-32);
	--radius-full: 9999px; /* pill / stadium */
	--radius-circle: 50%; /* circle (avatars) */
	/* DEPRECATED t-shirt aliases → ordinal. Kept so in-flight branches keep
	   resolving; */
	--radius-none: var(--radius-0);
	--radius-xxs: var(--radius-0-5);
	--radius-xs: var(--radius-1);
	--radius-s: var(--radius-2);
	--radius-m: var(--radius-3);
	--radius-base: var(--radius-4);
	--radius-l: var(--radius-5);
	--radius-xl: var(--radius-6);
	--radius-xxl: var(--radius-8);

	/* Border width variables. */
	--border-0: 0; /* no border, as a state */
	--border-1: 1px; /* default hairline — dividers, input outlines, card edges */
	--border-2: 2px; /* emphasis — selected, active */

	/* Gray */
	--gray-modern-0: #ffffff;
	--gray-modern-25: #fcfcfd;
	--gray-modern-50: #f8fafc;
	--gray-modern-100: #f1f5f9;
	--gray-modern-200: #e2e8f0;
	--gray-modern-300: #cbd5e1;
	--gray-modern-400: #94a3b8;
	--gray-modern-500: #64748b;
	--gray-modern-600: #475569;
	--gray-modern-700: #334155;
	--gray-modern-800: #1e293b;
	--gray-modern-900: #0f172a;

	/* Charcoal  */
	--charcoal-200: #525252;
	--charcoal-300: #3b3b3b;
	--charcoal-400: #323232;
	--charcoal-500: #292929;
	--charcoal-600: #1d1d1d;
	--charcoal-700: #141414;

	/* Charcoal elevation  */
	--charcoal-elevation-25: #eaeaea;
	--charcoal-elevation-50: #bfbfbf;
	--charcoal-elevation-100: #8b8b8b;
	--charcoal-elevation-200: #767676;
	--charcoal-elevation-300: #696969;
	--charcoal-elevation-400: #545454;
	--charcoal-elevation-500: #3e3e3e;
	--charcoal-elevation-600: #363636;
	--charcoal-elevation-700: #2f2f2f;
	--charcoal-elevation-800: #2d2d2d;

	/* Neutral — unified dark-neutral scale (new canonical name; supersedes charcoal + charcoal-elevation, which are aliased into it above). */
	--neutral-0: #ffffff;
	--neutral-50: #fafafa;
	--neutral-100: #f5f5f5;
	--neutral-200: #e5e5e5;
	--neutral-300: #d4d4d4;
	--neutral-400: #a3a3a3;
	--neutral-500: #737373;
	--neutral-550: #626262;
	--neutral-600: #525252;
	--neutral-700: #404040;
	--neutral-800: #262626;
	--neutral-850: #1f1f1f;
	--neutral-900: #171717;
	--neutral-925: #101010;
	--neutral-950: #0a0a0a;

	/* Purple Brand*/
	--purple-brand-25: #fafaff;
	--purple-brand-50: #f4f3fd;
	--purple-brand-100: #eceafd;
	--purple-brand-200: #dbd7fd;
	--purple-brand-300: #cdc7fe;
	--purple-brand-400: #a69cfe;
	--purple-brand-500: #5f4dff;
	--purple-brand-600: #5546dd;
	--purple-brand-700: #4b3fbb;
	--purple-brand-800: #373077;
	--purple-brand-900: #2a274a;
	--purple-brand-950: #22202d;

	/* Blue Vurvey */
	--blue-vurvey-25: #ededf5;
	--blue-vurvey-50: #c8c8de;
	--blue-vurvey-100: #b7b7cf;
	--blue-vurvey-200: #9494b1;
	--blue-vurvey-300: #717092;
	--blue-vurvey-400: #4e4d74;
	--blue-vurvey-500: #2b2a56;
	--blue-vurvey-600: #222245;
	--blue-vurvey-700: #1a1934;
	--blue-vurvey-800: #111122;
	--blue-vurvey-900: #090811;

	/* Volt */
	--volt-50: #fdffe5;
	--volt-100: #fbffcc;
	--volt-200: #f9ffb2;
	--volt-300: #f6ff99;
	--volt-400: #f3ff52;
	--volt-500: #eaff00;
	--volt-600: #d7ea00;
	--volt-700: #a6b500;
	--volt-800: #7d8900;
	--volt-900: #5b6400;

	/* Red */
	--red-25: #fffbfa;
	--red-50: #fef2f2;
	--red-100: #fee2e2;
	--red-200: #fecaca;
	--red-300: #fca5a5;
	--red-400: #f87171;
	--red-500: #ef4444;
	--red-600: #dc2626;
	--red-700: #b91c1c;
	--red-800: #991b1b;
	--red-900: #7f1d1d;

	/* Red muted — dark-mode danger family (product-specific) */
	--red-muted-400: #cc7a73;
	--red-muted-500: #bf5852;
	--red-muted-600: #9e4944;
	--red-muted-900: #3b1a17;

	/* Pink dirty */
	--pink-dirty-25: #f8eef0;
	--pink-dirty-50: #f2dde1;
	--pink-dirty-100: #ebccd3;
	--pink-dirty-200: #e5bbc4;
	--pink-dirty-300: #d79aa6;
	--pink-dirty-400: #ca7889;
	--pink-dirty-500: #bd566b;
	--pink-dirty-600: #9c4758;
	--pink-dirty-700: #7b3845;
	--pink-dirty-800: #5b2833;
	--pink-dirty-900: #3a1920;

	/* Teal */
	--teal-25: #ddfbf8;
	--teal-50: #f0fdfa;
	--teal-100: #ccfbf1;
	--teal-200: #99f6e4;
	--teal-300: #5eead4;
	--teal-400: #2dd4bf;
	--teal-500: #14b8a6;
	--teal-600: #0d9488;
	--teal-700: #0f766e;
	--teal-800: #115e59;
	--teal-900: #134e4a;

	/* Purple modern */
	--purple-modern-25: #fcfaff;
	--purple-modern-50: #faf5ff;
	--purple-modern-100: #f3e8ff;
	--purple-modern-200: #e9d5ff;
	--purple-modern-300: #d8b4fe;
	--purple-modern-400: #c084fc;
	--purple-modern-500: #a855f7;
	--purple-modern-600: #9333ea;
	--purple-modern-700: #7e22ce;
	--purple-modern-800: #6b21a8;
	--purple-modern-900: #581c87;

	/* Cyan */
	--cyan-25: #f5feff;
	--cyan-50: #ecfeff;
	--cyan-100: #cffafe;
	--cyan-200: #a5f3fc;
	--cyan-300: #67e8f9;
	--cyan-400: #22d3ee;
	--cyan-500: #06b6d4;
	--cyan-600: #0891b2;
	--cyan-700: #0e7490;
	--cyan-800: #155e75;
	--cyan-900: #164e63;

	/* Lime */
	--lime-25: #f9fef3;
	--lime-50: #f2fee5;
	--lime-100: #e3fbcc;
	--lime-200: #d0f8ab;
	--lime-300: #a6ef67;
	--lime-400: #85e13a;
	--lime-500: #66c61c;
	--lime-600: #4ca30d;
	--lime-700: #3b7c0f;
	--lime-800: #326212;
	--lime-900: #2b5314;

	/* Green Vurvey (emerald) */
	--green-vurvey-25: #f0fdf9;
	--green-vurvey-50: #ecfdf5;
	--green-vurvey-100: #d1fae5;
	--green-vurvey-200: #a7f3d0;
	--green-vurvey-300: #6ee7b7;
	--green-vurvey-400: #34d399;
	--green-vurvey-500: #10b981;
	--green-vurvey-600: #059669;
	--green-vurvey-700: #047857;
	--green-vurvey-800: #065f46;
	--green-vurvey-900: #064e3b;

	/* Tailwind Green  */
	--green-50: #f0fdf4;
	--green-100: #dcfce7;
	--green-200: #bbf7d0;
	--green-300: #86efac;
	--green-400: #4ade80;
	--green-500: #22c55e;
	--green-600: #16a34a;
	--green-700: #15803d;
	--green-800: #166534;
	--green-900: #14532d;
	--green-950: #052e16;

	/* Blue Dark */

	--blue-dark-25: #f5f8ff;
	--blue-dark-50: #eff6ff;
	--blue-dark-100: #dbeafe;
	--blue-dark-200: #bfdbfe;
	--blue-dark-300: #93c5fd;
	--blue-dark-400: #60a5fa;
	--blue-dark-500: #3b82f6;
	--blue-dark-600: #2563eb;
	--blue-dark-700: #1d4ed8;
	--blue-dark-800: #1e40af;
	--blue-dark-900: #1e3a8a;

	/* Yellow */

	--yellow-25: #fefcf0;
	--yellow-50: #fefce8;
	--yellow-100: #fef9c3;
	--yellow-200: #fef08a;
	--yellow-300: #fde047;
	--yellow-400: #facc15;
	--yellow-500: #eab308;
	--yellow-600: #ca8a04;
	--yellow-700: #a16207;
	--yellow-800: #854d0e;
	--yellow-900: #713f12;

	/* Amber */
	--amber-25: #fffdf5;
	--amber-50: #fffbeb;
	--amber-100: #fef3c7;
	--amber-200: #fde68a;
	--amber-300: #fcd34d;
	--amber-400: #fbbf24;
	--amber-500: #f59e0b;
	--amber-600: #d97706;
	--amber-700: #b45309;
	--amber-800: #92400e;
	--amber-900: #78350f;

	/* Social */
	--color-tiktok: #fe2858;
	--color-tiktok-secondary: #692937;

	--color-reddit: #ff4500;
	--color-reddit-secondary: #7a1f00;

	--color-linkedin: #0173b2;
	--color-linkedin-secondary: #1d3f52;

	--color-youtube: #ff0000;
	--color-youtube-secondary: #850000;

	--color-x-twitter: #000000;
	--color-x-twitter-secondary: #1f1f1f;

	--color-instagram: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
	--color-instagram-secondary: #5851db;

	--color-text-body: var(--gray-modern-900);
	--color-text-secondary: var(--gray-modern-700);
	--color-text-tertiary: var(--gray-modern-600);

	--color-background: var(--app-color-surface);
	--color-background-secondary: var(--gray-modern-200);
	--color-background-old: var(--gray-modern-50);
	--color-card-background: var(--gray-modern-50);
	--color-border-container: var(--gray-modern-200);
	--color-border: var(--gray-modern-300);
	--color-border-hover-brand: var(--blue-vurvey-100);
	--color-modal-background: var(--gray-modern-50);
	--color-background-element: var(--gray-modern-50);
	--color-text-card: var(--purple-brand-700);
	--color-border-soft: var(--gray-modern-100);

	--color-brand: var(--purple-brand-500);
	--color-brand-purple: var(--purple-brand-500);

	--color-navigation-background: var(--gray-modern-200);
	--color-scrollbar-thumb: var(--gray-modern-300);
	--color-scrollbar-thumb-hover: var(--gray-modern-500);
	--color-scrollbar-track: transparent;

	/* Brand Companion Theme Colors */
	/* These are overridden by user selections on the Brand Settings page, including them here for autocompletion */

	--md-sys-color-primary: #3f5f90;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #d6e3ff;
	--md-sys-color-on-primary-container: #254777;
	--md-sys-color-primary-dim: #325383;
	--md-sys-color-primary-fixed: #d6e3ff;
	--md-sys-color-on-primary-fixed: #001b3d;
	--md-sys-color-on-primary-fixed-variant: #254777;
	--md-sys-color-primary-fixed-dim: #a8c8ff;
	--md-sys-color-secondary: #555f71;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #d9e3f8;
	--md-sys-color-on-secondary-container: #3e4758;
	--md-sys-color-secondary-dim: #495365;
	--md-sys-color-secondary-fixed: #d9e3f8;
	--md-sys-color-on-secondary-fixed: #121c2b;
	--md-sys-color-on-secondary-fixed-variant: #3e4758;
	--md-sys-color-secondary-fixed-dim: #bdc7dc;
	--md-sys-color-surface: #f9f9ff;
	--md-sys-color-surface-variant: #f1dee4;
	--md-sys-color-surface-dim: #d9d9e0;
	--md-sys-color-surface-bright: #f9f9ff;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f3f3fa;
	--md-sys-color-surface-container: #ededf4;
	--md-sys-color-surface-container-high: #e7e8ee;
	--md-sys-color-surface-container-highest: #e2e2e9;
	--md-sys-color-on-surface: #191c20;
	--md-sys-color-on-surface-variant: #43474e;
	--md-sys-color-tertiary: #6f5675;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #f9d8fe;
	--md-sys-color-on-tertiary-container: #563e5c;
	--md-sys-color-tertiary-dim: #624a69;
	--md-sys-color-tertiary-fixed: #f9d8fe;
	--md-sys-color-on-tertiary-fixed: #28132f;
	--md-sys-color-on-tertiary-fixed-variant: #563e5c;
	--md-sys-color-tertiary-fixed-dim: #dcbce1;
	--md-sys-color-background: #f9f9ff;
	--md-sys-color-on-background: #191c20;
	--md-sys-color-inverse-surface: #2e3035;
	--md-sys-color-inverse-on-surface: #f0f0f7;
	--md-sys-color-inverse-primary: #a8c8ff;
	--md-sys-color-outline: #74777f;
	--md-sys-color-outline-variant: #c4c6cf;
	--md-sys-color-error-dim: #a80710;
	--md-sys-color-on-error-container: #93000a;
	--md-sys-color-shadow: #000000;
	--md-sys-color-scrim: #000000;

	/* Input element filters */
	--input-calendar-picker-filter: invert(0) brightness(0.5);
	--max-zindex: 1000000;
}

/* Theme variables, these should be preferred over direct color usage */
:root {
	/* Abstracted theme variables */
	--color-brand-hover: var(--purple-brand-600);
	--color-brand-foreground: var(--purple-brand-25);
	--color-brand-text: var(--purple-brand-800);
	--color-brand-subtle: var(--purple-brand-200);
	--color-brand-outline: var(--purple-brand-700);

	/* Danger / destructive feedback */
	--color-danger: var(--red-700);
	--color-danger-hover: var(--red-800);
	--color-danger-foreground: var(--red-100);
	--color-danger-text: var(--red-800);
	--color-danger-subtle: var(--red-50);
	--color-danger-outline: var(--red-900);

	/* Success + warning */
	--color-success: #16a34a;
	--color-success-subtle: rgba(22, 163, 74, 0.15);
	--color-success-foreground: #ffffff;
	--color-warning: #d97706;
	--color-warning-subtle: rgba(217, 119, 6, 0.15);
	--color-warning-foreground: #ffffff;

	/* AI / assistant accent */
	--color-ai: var(--charcoal-500);
	--color-ai-hover: var(--charcoal-700);
	--color-ai-foreground: var(--charcoal-elevation-25);

	/* Capability card accents (insight / concept). Built on the amber/violet
	   palettes above, with dark-theme overrides below; the evaluation accent
	   uses the green-vurvey (emerald) tokens directly at call sites. */
	--card-accent-amber: var(--amber-500);
	--card-accent-violet: var(--purple-modern-500);

	/* Neutral-surface button + chip palette */
	--color-surface-muted: var(--gray-modern-50);
	--color-surface-muted-hover: var(--gray-modern-200);
	--color-surface-muted-foreground: var(--gray-modern-800);
	--color-surface-active: var(--gray-modern-700);
	--color-surface-active-foreground: var(--charcoal-elevation-25);

	/* Disabled-control tokens */
	--color-control-disabled-bg: var(--gray-modern-300);
	--color-control-disabled-foreground: var(--gray-modern-400);
	--color-control-disabled-border: var(--gray-modern-300);

	/* Neutral outlined border (e.g. a default outlined Button) */
	--color-outline-default: var(--gray-modern-500);

	/* Card hover + focus surfaces */
	--color-card-background-hover: var(--gray-modern-100);
	--color-card-focus-ring: var(--purple-brand-500);
	--color-card-focus-ring-bg: var(--charcoal-elevation-25);

	/* Elevation shadows — alpha-based so they adapt per theme */
	--color-shadow-elevation: rgba(0, 0, 0, 0.1);
	--color-shadow-elevation-strong: rgba(0, 0, 0, 0.15);
	--color-shadow-brand-glow: rgba(139, 92, 246, 0.15);
}

:root {
	/* Surfaces — M3 tonal elevation. Light: higher elevation = darker */
	--app-color-surface: var(--neutral-50);
	--app-color-surface-container-lowest: var(--neutral-0);
	--app-color-surface-container-low: var(--neutral-50);
	--app-color-surface-container: var(--neutral-100);
	--app-color-surface-container-high: var(--neutral-200);
	--app-color-surface-container-highest: var(--neutral-300);

	/* On-colors — text and icons (icons bind on-* as stroke) */
	--app-color-on-surface: var(--neutral-900);
	--app-color-on-background: var(--neutral-900);
	--app-color-on-surface-variant: var(--neutral-700);
	--app-color-on-surface-subtle: var(--neutral-550);

	/* Outlines — borders and dividers */
	--app-color-outline: var(--neutral-300);
	--app-color-outline-variant: var(--neutral-200);

	/* Selection — neutral selected/active surface */
	--app-color-secondary-container: var(--neutral-200);
	--app-color-on-secondary-container: var(--neutral-900);

	/* Inverse — tooltips, snackbars, inverted chips */
	--app-color-inverse-surface: var(--neutral-900);
	--app-color-inverse-on-surface: var(--neutral-0);
	--app-color-inverse-primary: var(--purple-brand-400);

	/* Brand (primary) — one purple role, both modes */
	--app-color-primary: var(--purple-brand-500);
	--app-color-on-primary: var(--neutral-0);
	--app-color-primary-container: var(--purple-brand-100);
	--app-color-on-primary-container: var(--purple-brand-700);

	/* State-layer opacities — on-color overlays at fixed alpha (mode-independent) */
	--app-color-state-hover: 0.08;
	--app-color-state-focus: 0.1;
	--app-color-state-pressed: 0.1;
	--app-color-state-dragged: 0.16;
	--app-color-state-disabled-content: 0.38;
	--app-color-state-disabled-container: 0.12;

	/* Utility (mode-independent) — scrim is black @ 40%; shadow effect sets its own alpha */
	--app-color-scrim: rgba(0, 0, 0, 0.4);
	--app-color-shadow: #000000;
}

/* Elevation ladder */
:root {
	--shadow-resting:
		0 1px 0 0 color-mix(in srgb, var(--color-text-body) 4%, transparent),
		0 2px 6px -1px color-mix(in srgb, var(--color-text-body) 5%, transparent),
		0 8px 24px -6px color-mix(in srgb, var(--color-text-body) 8%, transparent);
	--shadow-raised:
		0 1px 0 0 color-mix(in srgb, var(--color-text-body) 5%, transparent),
		0 4px 12px -2px color-mix(in srgb, var(--color-text-body) 8%, transparent),
		0 24px 48px -12px color-mix(in srgb, var(--color-text-body) 12%, transparent);
	--shadow-overlay: var(--shadow-raised);
}
/* global overrides */
html {
	box-sizing: border-box;
	font-size: 10px;
	font-family: "Inter", batterii-brand, sans-serif;
	height: 100vh;
	background-color: var(--color-background);

	/* Mobile: Prevent horizontal scrolling */
	@media (max-width: 779px) {
		overflow-x: hidden;
	}
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body {
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border: 0;
	height: 100vh;

	/* Mobile: Prevent horizontal scrolling and improve touch scrolling */
	@media (max-width: 779px) {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		/* Prevent zoom on input focus in iOS */
		-webkit-text-size-adjust: 100%;
	}
}
@layer base, components, features;
@layer base {
	b,
	strong {
		font-weight: 600;
	}
	#root {
		height: 100%;
		background-color: var(--app-color-surface-container);
	}

	h1 {
		font-weight: 500;
		font-size: 3.2rem;
		line-height: 4rem;

		/* Mobile: Smaller heading sizes */
		@media (max-width: 779px) {
			font-size: 2.4rem;
			line-height: 3rem;
		}
	}
	h2 {
		font-size: 2.1rem;
		line-height: 2.4rem;
		font-weight: 600;

		/* Mobile: Smaller heading sizes */
		@media (max-width: 779px) {
			font-size: 1.8rem;
			line-height: 2.2rem;
		}
	}

	p {
		margin: 0;
	}
}

html.dark-theme {
	color-scheme: dark;
	--color-text-body: var(--charcoal-elevation-25);
	--color-text-secondary: var(--charcoal-elevation-50);
	--color-text-tertiary: var(--charcoal-elevation-100);

	--color-background-secondary: var(--charcoal-700);
	--color-background-old: var(--charcoal-600);
	--color-card-background: var(--app-color-surface-container-lowest);
	--color-border-container: var(--charcoal-elevation-500);
	--color-border: var(--charcoal-elevation-400);
	--color-border-hover-brand: var(--charcoal-elevation-400);
	--color-modal-background: var(--charcoal-500);
	--color-text-card: var(--purple-brand-300);
	--color-border-soft: var(--charcoal-elevation-600);

	--color-brand: var(--volt-500);
	--color-brand-purple: var(--purple-brand-400);

	--color-navigation-background: var(--charcoal-700);
	--color-scrollbar-thumb: var(--charcoal-elevation-400);
	--color-scrollbar-thumb-hover: var(--charcoal-elevation-200);
	--color-scrollbar-track: transparent;

	/* Input element filters */
	--input-calendar-picker-filter: invert(1) brightness(1.2);
	--element-shadow: none;
}

/* Theme variables, these should be preferred over direct color usage */
html.dark-theme {
	color-scheme: dark;
	--color-brand-hover: var(--volt-600);
	--color-brand-foreground: var(--charcoal-600);
	--color-brand-text: var(--volt-500);
	--color-brand-subtle: var(--charcoal-elevation-600);
	--color-brand-outline: var(--charcoal-elevation-100);
	--color-danger: var(--red-muted-500);
	--color-danger-hover: var(--red-muted-400);
	--color-danger-foreground: var(--charcoal-600);
	--color-danger-text: var(--red-muted-400);
	--color-danger-subtle: var(--red-muted-900);
	--color-danger-outline: var(--red-muted-600);
	--color-ai: var(--volt-500);
	--color-ai-hover: var(--volt-600);
	--color-ai-foreground: var(--charcoal-elevation-700);
	--color-surface-muted: transparent;
	--color-surface-muted-hover: var(--charcoal-elevation-600);
	--color-surface-muted-foreground: var(--charcoal-elevation-25);
	--color-surface-active: var(--charcoal-elevation-50);
	--color-surface-active-foreground: var(--charcoal-600);
	--color-control-disabled-bg: var(--gray-modern-600);
	--color-control-disabled-foreground: var(--gray-modern-500);
	--color-control-disabled-border: var(--charcoal-elevation-500);
	--color-outline-default: var(--charcoal-elevation-100);
	--color-card-focus-ring: var(--volt-500);
	--color-card-focus-ring-bg: var(--charcoal-elevation-800);
	--color-shadow-elevation: rgba(0, 0, 0, 0.5);
	--color-shadow-elevation-strong: rgba(0, 0, 0, 0.7);
	--color-shadow-brand-glow: rgba(234, 255, 0, 0.2);

	/* Capability card accents — one step lighter for contrast on dark surfaces */
	--card-accent-amber: var(--amber-400);
	--card-accent-violet: var(--purple-modern-400);
}

html.dark-theme {
	--app-color-surface: color-mix(in srgb, var(--neutral-950), var(--purple-brand-300) 5%);
	--app-color-surface-container-lowest: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 4%);
	--app-color-surface-container-low: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 6%);
	--app-color-surface-container: color-mix(in srgb, var(--neutral-850), var(--purple-brand-300) 8%);
	--app-color-surface-container-high: color-mix(in srgb, var(--neutral-700), var(--purple-brand-300) 11%);
	--app-color-surface-container-highest: color-mix(in srgb, var(--neutral-600), var(--purple-brand-300) 14%);

	/* On-colors */
	--app-color-on-surface: var(--neutral-50);
	--app-color-on-background: var(--neutral-50);
	--app-color-on-surface-variant: var(--neutral-300);
	--app-color-on-surface-subtle: var(--neutral-400);

	--app-color-outline: color-mix(in srgb, var(--neutral-700), var(--purple-brand-300) 11%);
	--app-color-outline-variant: color-mix(in srgb, var(--neutral-800), var(--purple-brand-300) 11%);

	/* Selection */
	--app-color-secondary-container: var(--neutral-700);
	--app-color-on-secondary-container: var(--neutral-50);

	/* Inverse */
	--app-color-inverse-surface: var(--neutral-50);
	--app-color-inverse-on-surface: var(--neutral-900);
	--app-color-inverse-primary: var(--purple-brand-500);

	/* Brand (primary) — lightens (500 → 400); primary-container goes neutral in dark */
	--app-color-primary: var(--purple-brand-400);
	--app-color-on-primary: var(--neutral-900);
	--app-color-primary-container: var(--neutral-800);
	--app-color-on-primary-container: var(--purple-brand-300);

	/* Shadows */
	--app-color-shadow: var(--neutral-700);
}

/* Elevation ladder. Charcoal-tinted, higher alpha;
   the tonal surface ladder shares the lift, so shadow is the second signal. */
html.dark-theme {
	--shadow-resting:
		0 1px 0 0 color-mix(in srgb, var(--charcoal-700) 40%, transparent),
		0 2px 6px -1px color-mix(in srgb, var(--charcoal-700) 35%, transparent),
		0 8px 24px -6px color-mix(in srgb, var(--charcoal-700) 50%, transparent);
	--shadow-raised:
		0 1px 0 0 color-mix(in srgb, var(--charcoal-700) 50%, transparent),
		0 4px 12px -2px color-mix(in srgb, var(--charcoal-700) 45%, transparent),
		0 24px 48px -12px color-mix(in srgb, var(--charcoal-700) 60%, transparent);
	/* overlay aliases raised (:root), so it inherits this dark value automatically */
}

html.guest-mode {
	--guest-mode-color-background: var(--md-sys-color-secondary-container);
	--color-text-body: var(--md-sys-color-on-surface);
	--color-text-secondary: var(--md-sys-color-on-surface-variant);
	--color-text-tertiary: var(--md-sys-color-outline);

	--color-background: var(--md-sys-color-background);
	--color-background-secondary: var(--md-sys-color-surface-container);
	--color-background-old: var(--md-sys-color-background);
	--color-card-background: var(--md-sys-color-surface-container-low);
	--color-border-container: var(--md-sys-color-outline-variant);
	--color-border: var(--md-sys-color-outline);
	--color-border-hover-brand: var(--md-sys-color-primary-container);
	--color-modal-background: var(--md-sys-color-surface);
	--color-background-element: var(--md-sys-color-surface-container-lowest);
	--color-text-card: var(--md-sys-color-primary);
	--color-border-soft: var(--md-sys-color-surface-variant);

	--color-brand: var(--md-sys-color-primary);
	--color-brand-purple: var(--md-sys-color-primary);

	--color-navigation-background: var(--md-sys-color-surface-container);
	--color-scrollbar-thumb: var(--md-sys-color-outline-variant);
	--color-scrollbar-thumb-hover: var(--md-sys-color-outline);
	--color-scrollbar-track: transparent;
	--guest-top-nav-height: 46px;

	/* Ensure guest mode still overrides the new colors, may be able to cut entirely to the new colors at some point, but we're not there yet */
	/* Surfaces */
	--app-color-surface: var(--md-sys-color-surface);
	--app-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
	--app-color-surface-container-low: var(--md-sys-color-surface-container-low);
	--app-color-surface-container: var(--md-sys-color-surface-container);
	--app-color-surface-container-high: var(--md-sys-color-surface-container-high);
	--app-color-surface-container-highest: var(--md-sys-color-surface-container-highest);

	/* On-colors */
	--app-color-on-surface: var(--md-sys-color-on-surface);
	--app-color-on-background: var(--md-sys-color-on-background);
	--app-color-on-surface-variant: var(--md-sys-color-on-surface-variant);

	/* Outlines */
	--app-color-outline: var(--md-sys-color-outline);
	--app-color-outline-variant: var(--md-sys-color-outline-variant);

	/* Selection */
	--app-color-secondary-container: var(--md-sys-color-secondary-container);
	--app-color-on-secondary-container: var(--md-sys-color-on-secondary-container);

	/* Inverse */
	--app-color-inverse-surface: var(--md-sys-color-inverse-surface);
	--app-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
	--app-color-inverse-primary: var(--md-sys-color-inverse-primary);

	/* Primary */
	--app-color-primary: var(--md-sys-color-primary);
	--app-color-on-primary: var(--md-sys-color-on-primary);
	--app-color-primary-container: var(--md-sys-color-primary-container);
	--app-color-on-primary-container: var(--md-sys-color-on-primary-container);
}