/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Inter:wght@200;400;700&display=swap');

:root {

    /*
     *
     * Design Tokens
     * - Colors, spacing, radius, typography, layout
     *
     */
	
	--header-fonts: "Libre Baskerville", serif;
	--base-fonts: "Inter", sans-serif;
	--system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;

	--bg-brushed-metal: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E");
	--bg-noise-intense: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.75'/%3E%3C/svg%3E");
	--bg-noise-medium: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
	--bg-noise-soft: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");

	--bg-effect-light: var(--bg-noise-medium);
	--bg-effect-dark: var(--bg-noise-soft);
	--bg-effect-blend-light: multiply;
	--bg-effect-blend-dark: screen;
	--bg-size: 200px;
	
    /* Brand color scales (per section, 200 = light, 500 = base, 900 = dark) */
    --brand-lab-200: #7ab493;
	--brand-lab-500: #0c7e58;
	--brand-lab-900: #070907;

    --brand-ux-200: #6FAADE;
    --brand-ux-500: #0F299B;
    --brand-ux-900: #131323;

    --brand-art-200: #C49F9D;
    --brand-art-500: #AF2A25;
    --brand-art-900: #140C0C;

    /* Core colors */
	--color-bg: #fcfbf8;
    --color-surface: #ffffff; /* surface cards, panels */
    --color-text: #444444; /* default body text */
    --color-borders: #E1E0D5; /* rules and dividers */

    /* Neutral scale used across UI */
    --color-gray-100: #eee;
    --color-gray-200: #ddd;
    --color-gray-300: #ccc;
    --color-gray-600: #999;
    --color-gray-800: #333;
    --color-gray-900: #111;
    --color-black: #000;

    /* Accent colors */
    --color-accent: var(--color-gray-800);
    --color-accent-dark: var(--color-gray-900);
    --color-accent-light: var(--color-gray-200);

    /* Contextual colors */
    --color-price: #0a8115; /* Woo prices */
    --color-special: #cb9400; /* Special CTA highlight */

    /* Spacing scale */
    --space-2xs: 4px;
    --space-xs: 5px;
    --space-s: 10px;
    --space-m: 20px;
    --space-lg: 40px;
    --space-xl: 50px;
    --space-2xl: 70px;
    --space-3xl: 100px;

    /* Radius scale */
    --radius-xs: 2px;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 10px;
	
    /* Motion */
    --motion-fast: 200ms;
	--motion-medium: 300ms;
	--motion-steady: 600ms;
	--motino-slow: 800ms;

    /* Shadows & Glows */
	--shadow-heavy: 0 1px 3px #0006, 0 3px 10px #0003;
	--shadow-heavy-elevated: 0 1px 10px #000, 0 3px 20px #000;
	--shadow-medium: 0 2px 2px -1px #29415b5e, 0 3px 10px #29415b57;
	--shadow-medium-elevated: 0 1px 5px #29415b91, 0 3px 20px #29415b57;
	--shadow-soft: 0 1px 1px #0001, 0 3px 10px #00000006;
	
	--shadow-glass-medium: 0 0 100px #b7cdcd, 0 2px 4px #355e6973;
    
    --inner-glow: inset 0 0 1px 1px #fff2;

	/* Shadows (Old) */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.10);
    --shadow-md-2: 0 2px 5px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 0 10px rgba(0, 0, 0, 0.12);

    /* Layout helpers */
    --container-max: 900px;
    --container-max-with-gutter: 940px; /* calc(900px + (page gutters)) */
    --container-wide: 1280px;

    --page-gutter-s: var(--space-m);
    --page-gutter-l: var(--space-xl);
    /* Legacy aliases for page gutters */
    --page-margin-s: var(--page-gutter-s);
    --page-margin-l: var(--page-gutter-l);

    /* Common component sizes */
    --thumbnail-size: 120px;
	--icon-size-xs: 12px;
	--icon-size-s: 16px;
    --icon-size-m: 24px;

    /* Typography scale */
	--font-size-xxl: 3rem;
    --font-size-xl: 2.4rem;
    --font-size-l: 1.4rem;
    --font-size-m: 1.1rem;
    --font-size-s: 0.9rem;
    --font-size-xs: 0.8rem;
    --font-size-2xs: 0.7rem;

    /* Breakpoints */
    --breakpoint-l: var(--container-max);
    --breakpoint-l-with-gutter: var(--container-max-with-gutter);
    --breakpoint-m: 700px;
    --breakpoint-s: 550px;
}

/*
 *
 * Page-Specific Accent Overrides
 * - Sets logical accent tokens per content type
 *
 */
 
body.page-template-page-art {
    --color-accent: var(--brand-art-500);
    --color-accent-dark: var(--brand-art-900);
    --color-accent-light: var(--brand-art-200);
}

body.page-template-page-ux,
.casestudies-page,
.casestudy-page {
    --color-accent: var(--brand-ux-500);
    --color-accent-dark: var(--brand-ux-900);
    --color-accent-light: var(--brand-ux-200);
}

body.page-template-page-lab,
body.single-post {
    --color-accent: var(--brand-lab-500);
    --color-accent-dark: var(--brand-lab-900);
    --color-accent-light: var(--brand-lab-200);
}

.woocommerce,
.woocommerce-page {
    --color-accent: #186982;
    --color-accent-dark: #041419;
    --color-accent-light: #5da1b6;
}