/* ==========================================================================
   DESIGN SYSTEM — VARIABLES
   ==========================================================================

   This is the single source of truth for all visual properties.
   Every component, layout, and channel adapter references these variables.
   Nothing gets hardcoded — if a value isn't here, it doesn't exist.

   STRUCTURE:
   1. Colors        — Brand palette, neutrals, semantic states
   2. Typography    — Font families, sizes, weights, line heights
   3. Spacing       — Consistent scale for padding, margins, gaps
   4. Layout        — Container widths, breakpoints, content measures
   5. Borders       — Radii and border widths
   6. Shadows       — Elevation levels
   7. Z-Index       — Stacking layers
   8. Transitions   — Animation speeds and easing
   9. Opacity       — Transparency levels

   USAGE:
   - Import this file into every template (web, email, social, slides, print)
   - Reference variables only — never use raw values in components
   - To rebrand: swap values in this file, everything updates

   DARK MODE:
   - Light mode is the default (:root)
   - Dark mode overrides via [data-theme="dark"]
   - Only color and shadow variables change in dark mode
   - Spacing, typography, and borders stay the same
   ========================================================================== */


/* ==========================================================================
   0. FONT LOADING
   ========================================================================== */

/* Inter — self-hosted, no network round-trip */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BN Dopeneck';
  src: url('assets/fonts/BNDopeneck.woff2') format('woff2'),
       url('assets/fonts/BNDopeneck.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   1. COLORS
   ========================================================================== */

:root {

   /* --- Brand Colors ---
     Primary:   Main brand color — buttons, links, key actions
     Secondary: Supporting brand color — accents, highlights, secondary actions
     Tertiary:  Third brand color — warm accent, decorative
     Accent 1:  Complementary color — callouts, tags, badges
     Accent 2:  Additional color — decorative, hover states, illustrations
  */
   --color-primary: #9F93F6;
   --color-primary-light: #C8C0F8;
   --color-primary-dark: #7B6FE0;

   --color-secondary: #CCF3A5;
   --color-secondary-light: #E8FAD6;
   --color-secondary-dark: #A3E95D;

   --color-tertiary: #fedbb3;
   --color-tertiary-light: #feeedc;
   --color-tertiary-dark: #fcc382;

   --color-accent-1: #93C4F6;
   --color-accent-1-light: #C0DBF8;
   --color-accent-1-dark: #6F9CE0;

   --color-accent-2: #F693C4;
   --color-accent-2-light: #F8C0DB;
   --color-accent-2-dark: #E070A8;


   /* --- Neutrals ---
     Full grayscale from white to black.
     Used for text, backgrounds, borders, and dividers.
  */
   --color-white: #FFFFFF;
   --color-neutral-50: #f7f7f7;
   --color-neutral-100: #ededed;
   --color-neutral-200: #cccccc;
   --color-neutral-300: #949494;
   --color-neutral-400: #757575;
   --color-neutral-500: #5c5c5c;
   --color-neutral-600: #4a4a4a; 
   --color-neutral-700: #3b3b3b; 
   --color-neutral-800: #292929; 
   --color-neutral-900: #141414; 
   --color-black: #000000;


   /* --- Surfaces ---
     Background colors for pages, cards, sections, overlays.
     Separated from neutrals so you can tint backgrounds with brand color.
  */
   --color-surface-page: var(--color-neutral-50);
   --color-surface-raised: var(--color-white);
   --color-surface-sunken: var(--color-neutral-200);
   --color-surface-overlay: rgba(0, 0, 0, 0.5);


   /* --- Semantic Colors ---
     Functional colors for system states.
     Sourced from the color system PDF — non-brand columns only.
     Band: light = -30 row, base = 0 row, dark = +10 row.
     Success = Mint (146), Error = Red (359), Warning = Banana (61), Info = Teal (180).
  */
   --color-success: #1bac5a;
   --color-success-light: #b5eecd;
   --color-success-dark: #128745;

   --color-warning: #A7AA09;
   --color-warning-light: #F5F77D;
   --color-warning-dark: #7A7C09;

   --color-error: #ee3f42;
   --color-error-light: #fcc9ca;
   --color-error-dark: #d2191c;

   --color-info: #17b5b5;
   --color-info-light: #aae9e9;
   --color-info-dark: #118d8d;


   /* --- Text Colors ---
     Mapped to surfaces so they stay readable in both themes.
  */
   --color-text-primary: var(--color-neutral-900);
   --color-text-secondary: var(--color-neutral-400);
   --color-text-tertiary: var(--color-neutral-300);
   --color-text-inverse: var(--color-white);
   --color-text-link: var(--color-primary);
   --color-text-link-hover: var(--color-white);


   /* --- Border Colors --- */
   --color-border-default: #E5E5E5;
   --color-border-strong: #D4D4D4;
   --color-border-focus: var(--color-primary);


   /* ==========================================================================
     2. TYPOGRAPHY
     ========================================================================== */

   /* --- Font Families ---
     Display: Headlines, titles, hero text — the brand voice
     Body:    Paragraphs, content, descriptions — readability first
     UI:      Buttons, labels, nav items, form elements — clarity and precision
  */
   --font-display: BN Dopeneck;
   --font-body: Inter, system-ui, -apple-system, sans-serif;
   --font-ui: Inter, system-ui, -apple-system, sans-serif;


   /* --- Font Sizes ---
     Semantic scale from xs to 6xl.
     xs–xl are fixed (body/UI text doesn't need fluid scaling).
     2xl–6xl use clamp() for fluid display text that scales with viewport.
  */
   --text-xs: 0.75rem;
   /* 12px — fine print, captions */
   --text-sm: 0.875rem;
   /* 14px — labels, metadata */
   --text-base: 1rem;
   /* 16px — body text default */
   --text-md: 1.125rem;
   /* 18px — lead paragraphs */
   --text-lg: 1.25rem;
   /* 20px — section intros, nav */
   --text-xl: clamp(1.5rem, 2.5vw, 2.5rem);
   /* 24–40px — card titles, h4, hero-bar buttons */
   --text-2xl: clamp(3.25rem, 3.5vw, 4.875rem);
   /* 40–78px — section headings, h3 */
   --text-3xl: clamp(3rem, 4.5vw, 6.25rem);
   /* 48–100px — page titles, h2 */
   --text-4xl: clamp(3.5rem, 6vw, 8rem);
   /* 56–128px — hero headlines, h1 */
   --text-5xl: clamp(4.5rem, 7.5vw, 10.75rem);
   /* 72–172px — display headlines */
   --text-6xl: clamp(6rem, 10vw, 13rem);
   /* 96–208px — homepage hero only */


   /* --- Font Weights --- */
   --weight-light: 300;
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
   --weight-extrabold: 800;


   /* --- Line Heights --- */
   --leading-none: 1;
   /* Headlines, single-line text */
   --leading-tight: 0.9;
   /* Titles, short text blocks */
   --leading-snug: 1.3;
   /* Subheadings */
   --leading-normal: 1.5;
   /* Body text — default */
   --leading-relaxed: 1.625;
   /* Long-form reading */
   --leading-loose: 2;
   /* Spacious layouts */


   /* --- Letter Spacing --- */
   --tracking-tight: -0.025em;
   /* Large headlines */
   --tracking-normal: 0;
   /* Body text */
   --tracking-wide: 0.025em;
   /* Uppercase labels, buttons */
   --tracking-wider: 0.05em;
   /* Small caps, eyebrow text */


   /* ==========================================================================
     3. SPACING
     ========================================================================== */

   /* --- Spacing Scale ---
     Consistent rhythm for all padding, margins, and gaps.
     Based on a 4px base unit.
  */
   --space-none: 0;
   --space-2xs: 0.125rem;
   /* 2px  — hairline gaps */
   --space-xs: 0.25rem;
   /* 4px  — tight internal spacing */
   --space-sm: 0.5rem;
   /* 8px  — compact elements */
   --space-md: 1rem;
   /* 16px — default spacing */
   --space-lg: 1.5rem;
   /* 24px — section padding */
   --space-xl: 2rem;
   /* 32px — card padding, gaps */
   --space-2xl: 3rem;
   /* 48px — section margins */
   --space-3xl: 4rem;
   /* 64px — page sections */
   --space-4xl: 6rem;
   /* 96px — hero spacing */


   /* ==========================================================================
     4. LAYOUT
     ========================================================================== */

   /* --- Container Widths ---
     Max-widths for constraining content across channels.
     Use these on wrapper elements — never let content run full-bleed without intent.
  */
   --container-xs: 20rem;
   /* 320px — mobile, narrow widgets */
   --container-sm: 24rem;
   /* 384px — small cards, sidebars */
   --container-md: 28rem;
   /* 448px — email content width */
   --container-lg: 32rem;
   /* 512px — social post cards */
   --container-xl: 48rem;
   /* 768px — article/blog content */
   --container-2xl: 64rem;
   /* 1024px — standard page content */
   --container-3xl: 80rem;
   /* 1280px — wide layouts */
   --container-4xl: 96rem;
   /* 1536px — extra-wide layouts */
   --container-full: 100%;
   /* Full width of parent */

   /* --- Component Heights --- */
   --header-height: 5.5rem;
   /* 88px — site header bar */

   /* --- Content Measure ---
     Max character width for readable text blocks.
     Prevents lines from running too long on wide screens.
  */
   --measure-narrow: 45ch;
   /* Tight columns, captions */
   --measure-default: 65ch;
   /* Optimal reading width */
   --measure-wide: 80ch;
   /* Wide content, tables */

   /* --- Breakpoints (as reference values) ---
     CSS variables can't be used in @media queries directly,
     but these document the system's breakpoints for consistency.
     Use these values in media queries: @media (min-width: 640px) {}
  */
   --breakpoint-sm: 640px;
   /* Mobile landscape */
   --breakpoint-md: 768px;
   /* Tablet portrait */
   --breakpoint-lg: 1024px;
   /* Tablet landscape / small desktop */
   --breakpoint-xl: 1280px;
   /* Desktop */
   --breakpoint-2xl: 1536px;
   /* Wide desktop */

   /* --- Aspect Ratios (reference values) ---
     Common ratios for social media and content formats.
     Use with aspect-ratio property: aspect-ratio: 1 / 1;
  */
   /* --ratio-square:        1 / 1          Instagram post, profile images */
   /* --ratio-landscape:     16 / 9         YouTube, presentations, hero banners */
   /* --ratio-portrait:      4 / 5          Instagram portrait, social cards */
   /* --ratio-story:         9 / 16         Instagram/TikTok stories */
   /* --ratio-wide:          21 / 9         Ultra-wide banners */
   /* --ratio-classic:       4 / 3          Classic presentations */
   /* --ratio-a4:            1 / 1.414      A4 documents, print */


   /* ==========================================================================
     5. BORDERS
     ========================================================================== */

   /* --- Border Widths --- */
   --border-thin: 2px;
   --border-default: 2px;
   --border-thick: 4px;

   /* --- Border Radii --- */
   --radius-none: 0;
   --radius-sm: 0.125rem;
   /* 2px  — subtle rounding */
   --radius-md: 0.125rem;
   /* 2px  — buttons, inputs */
   --radius-lg: 0;
   /* 0    — cards */
   --radius-xl: 0;
   /* 0    — modals, panels */
   --radius-2xl: 0;
   /* 0    — large containers */
   --radius-full: 9999px;
   /* Pills, avatars */
   --radius-pill: 0.25rem;
   /* 4px  — buttons, tags */
   --radius-image: 0;
   /* 0    — inline images */
   --radius-checkbox: 0.125rem;
   /* 2px  — checkboxes, small controls */


   /* ==========================================================================
     5. SHADOWS
     ========================================================================== */

   /* --- Elevation Levels ---
     Progressive depth from subtle to dramatic.
  */
   --shadow-none: none;
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.03);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 24px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 24px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 24px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);


   /* ==========================================================================
     7. Z-INDEX
     ========================================================================== */

   /* --- Stacking Layers ---
     Named layers prevent z-index wars.
     Every positioned element should reference one of these — never use raw numbers.
  */
   --z-behind: -1;
   /* Behind default content */
   --z-default: 0;
   /* Default stacking */
   --z-raised: 10;
   /* Cards, elevated elements */
   --z-dropdown: 100;
   /* Dropdowns, select menus */
   --z-sticky: 200;
   /* Sticky headers, nav bars */
   --z-overlay: 300;
   /* Overlays, backdrops */
   --z-modal: 400;
   /* Modals, dialogs */
   --z-popover: 500;
   /* Popovers, tooltips */
   --z-toast: 600;
   /* Toast notifications */
   --z-max: 9999;
   /* Emergency override only */


   /* ==========================================================================
     8. TRANSITIONS
     ========================================================================== */

   /* --- Durations --- */
   --duration-instant: 50ms;
   --duration-fast: 100ms;
   --duration-default: 200ms;
   --duration-moderate: 300ms;
   --duration-slow: 400ms;
   --duration-slower: 500ms;
   --duration-dramatic: 900ms;

   /* --- Easing --- */
   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);


   /* ==========================================================================
     9. OPACITY
     ========================================================================== */

   --opacity-disabled: 0.4;
   --opacity-muted: 0.6;
   --opacity-subtle: 0.8;
   --opacity-full: 1;


   /* ==========================================================================
     10. BRAND MOTIF
     ========================================================================== */

   /* --- Construction Lines ---
     72° angled lines used as brand signature texture.
     Atmospheric: faint background texture.
     Compositional: visible structural element.
  */
   --motif-angle: 72deg;
   --motif-weight-atmospheric: 0.5px;
   --motif-weight-compositional: 1px;
   --motif-opacity-atmospheric: 0.06;
   --motif-opacity-compositional: 0.30;

   /* --- Wordmark Slash Spacing --- */
   --motif-slash-gap-left: 0.35em;
   --motif-slash-gap-right: 0.25em;
}


/* ==========================================================================
   DARK MODE
   ==========================================================================
   Apply with: <html data-theme="dark">
   Only colors and shadows change — spacing, type, and borders stay the same.
   ========================================================================== */

[data-theme="dark"] {

   /* --- Surfaces (dark backgrounds) --- */
   --color-surface-page: var(--color-neutral-800);
   --color-surface-raised: var(--color-black);
   --color-surface-sunken: var(--color-neutral-700);
   --color-surface-overlay: rgba(0, 0, 0, 0.7);


   /* --- Text (light on dark) --- */
   --color-text-primary: var(--color-neutral-100);
   --color-text-secondary: var(--color-neutral-300);
   --color-text-tertiary: var(--color-neutral-500);
   --color-text-inverse: var(--color-neutral-900);


   /* --- Borders (dark mode) --- */
   --color-border-default: #404040;
   --color-border-strong: #525252;


   /* --- Semantic Colors (adjusted for dark backgrounds) ---
     Same columns (Mint, Red, Banana, Teal), shifted up one row for readability.
     Light still lightest, dark still darkest. Base shifted to -20 for visibility.
   */
   --color-success: #80e0aa;
   --color-success-light: #b5eecd;
   --color-success-dark: #1bac5a;

   --color-warning: #E8EB3D;
   --color-warning-light: #F5F77D;
   --color-warning-dark: #A7AA09;

   --color-error: #fa9ea0;
   --color-error-light: #fcc9ca;
   --color-error-dark: #ee3f42;

   --color-info: #7cdede;
   --color-info-light: #aae9e9;
   --color-info-dark: #17b5b5;

   /* --- Shadows (darker, more diffused on dark backgrounds) --- */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
}