/* -----------------------------------------------------------------------
 * Burntwood Business design tokens.
 * Sourced from the docs/design-references discovery files.
 * Aesthetic: bento grid, glassmorphism, light + dark.
 * -------------------------------------------------------------------- */

:root {
	/* Surfaces (light) */
	--surface:                       #fcf8fa;
	--surface-dim:                   #dcd9db;
	--surface-bright:                #fcf8fa;
	--surface-container-lowest:      #ffffff;
	--surface-container-low:         #f6f3f5;
	--surface-container:             #f0edef;
	--surface-container-high:        #eae7e9;
	--surface-container-highest:     #e4e2e4;
	--surface-variant:               #e4e2e4;
	--background:                    #fcf8fa;

	/* Ink (light) */
	--on-surface:                    #1b1b1d;
	--on-surface-variant:            #45464d;
	--on-background:                 #1b1b1d;
	--inverse-surface:               #303032;
	--inverse-on-surface:            #f3f0f2;

	/* Outlines */
	--outline:                       #76777d;
	--outline-variant:               #c6c6cd;

	/* Brand: Deep Navy + Vibrant Teal + Aqua */
	--primary:                       #0f172a;
	--on-primary:                    #ffffff;
	--primary-container:             #131b2e;
	--on-primary-container:          #7c839b;
	--primary-fixed:                 #dae2fd;
	--primary-fixed-dim:             #bec6e0;
	--inverse-primary:               #bec6e0;

	--secondary:                     #006a61;
	--on-secondary:                  #ffffff;
	--secondary-container:           #86f2e4;
	--on-secondary-container:        #006f66;
	--secondary-fixed:               #89f5e7;
	--secondary-fixed-dim:           #6bd8cb;

	--tertiary:                      #574425;
	--on-tertiary:                   #ffffff;
	--tertiary-container:            #fcdeb5;
	--on-tertiary-container:         #271901;
	--tertiary-fixed:                #fcdeb5;
	--tertiary-fixed-dim:            #dec29a;

	--accent-aqua:                   #2dd4bf;
	--accent-aqua-soft:              #f0fdfa;

	/* Status */
	--error:                         #ba1a1a;
	--on-error:                      #ffffff;
	--error-container:               #ffdad6;
	--on-error-container:            #93000a;
	--success:                       #15803d;
	--warning:                       #d88a1a;

	/* Glass */
	--glass-bg:                      rgba(255, 255, 255, 0.6);
	--glass-border:                  rgba(255, 255, 255, 0.4);
	--glass-blur:                    blur(12px);

	/* Typography (Montserrat for display, Inter for body) */
	--font-display:                  "Montserrat", "Avenir Next", system-ui, sans-serif;
	--font-body:                     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-icon:                     "Material Symbols Outlined";

	--display-lg-size:               48px;
	--display-lg-line:               1.1;
	--display-lg-tracking:           -0.02em;

	--headline-lg-size:              32px;
	--headline-lg-size-mobile:       28px;
	--headline-lg-line:              1.2;
	--headline-lg-tracking:          -0.01em;

	--headline-md-size:              24px;
	--headline-md-line:              1.3;

	--body-lg-size:                  18px;
	--body-lg-line:                  1.6;

	--body-md-size:                  16px;
	--body-md-line:                  1.5;

	--label-md-size:                 14px;
	--label-md-line:                 1.2;
	--label-md-tracking:             0.05em;

	--caption-size:                  12px;
	--caption-line:                  1.4;

	/* Spacing (8px Burntwood Step) */
	--step:                          8px;
	--xs:                            4px;
	--sm:                            8px;
	--md:                            16px;
	--lg:                            24px;
	--xl:                            40px;
	--xxl:                           64px;
	--gutter:                        24px;
	--margin-mobile:                 20px;
	--margin-desktop:                40px;
	--bento-gap:                     16px;
	--container-max:                 1280px;

	/* Radii */
	--r-sm:                          0.25rem;
	--r-md:                          0.5rem;
	--r-lg:                          0.75rem;
	--r-xl:                          1rem;
	--r-2xl:                         1.5rem;
	--r-full:                        9999px;

	/* Elevation (light: soft enterprise shadows) */
	--shadow-1:                      0 2px 4px rgba(15, 23, 42, 0.04);
	--shadow-2:                      0 4px 12px rgba(15, 23, 42, 0.08);
	--shadow-3:                      0 10px 20px rgba(15, 23, 42, 0.08);

	/* Transitions */
	--ease:                          cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast:                      150ms;
	--dur:                           250ms;
	--dur-slow:                      400ms;

	color-scheme: light;
}

html.dark,
:root[data-theme="dark"] {
	/* Surfaces (dark) */
	--surface:                       #020617;
	--surface-dim:                   #020617;
	--surface-bright:                #0f172a;
	--surface-container-lowest:      #020617;
	--surface-container-low:         #0f172a;
	--surface-container:             #111c32;
	--surface-container-high:        #1e293b;
	--surface-container-highest:     #1e293b;
	--surface-variant:               #1e293b;
	--background:                    #020617;

	/* Ink */
	--on-surface:                    #f8fafc;
	--on-surface-variant:            #cbd5e1;
	--on-background:                 #f8fafc;
	--inverse-surface:               #f3f0f2;
	--inverse-on-surface:            #303032;

	/* Outlines */
	--outline:                       #475569;
	--outline-variant:               #334155;

	/* Brand */
	--primary:                       #f8fafc;
	--on-primary:                    #0f172a;
	--primary-container:             #1e293b;
	--on-primary-container:          #cbd5e1;

	--secondary:                     #2dd4bf;
	--on-secondary:                  #0f172a;
	--secondary-container:           rgba(45, 212, 191, 0.18);
	--on-secondary-container:        #5eead4;
	--secondary-fixed:               #2dd4bf;
	--secondary-fixed-dim:           #5eead4;

	--accent-aqua:                   #5eead4;
	--accent-aqua-soft:              rgba(45, 212, 191, 0.14);

	/* Glass */
	--glass-bg:                      rgba(15, 23, 42, 0.6);
	--glass-border:                  rgba(255, 255, 255, 0.1);

	/* Status */
	--error:                         #f43f5e;
	--success:                       #34d399;
	--warning:                       #fbbf24;

	/* Elevation (dark uses tonal layering, lighter shadows) */
	--shadow-1:                      0 2px 4px rgba(0, 0, 0, 0.32);
	--shadow-2:                      0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-3:                      0 10px 20px rgba(0, 0, 0, 0.5);

	color-scheme: dark;
}

@media (max-width: 767px) {
	:root {
		--margin-desktop:            20px;
		--gutter:                    16px;
	}
}