@import url("fonts.css"); /* ============================================================ CSS Variables — generated from design.json (manual sync) Personal (blue) + Second (green) are NEVER mixed on one page. Each page sets data-theme="green" | "red" on or (names kept for compatibility; green→personal, red→second). UI components consume --color-accent* only (theme-scoped). ============================================================ */ :root { /* ----- Brand families (source of truth) ----- */ /* Personal color — blue series (from brand logo mark) */ --color-personal: #589EF5; --color-personal-light: #7BB4F8; --color-personal-dark: #3B82E0; --color-personal-deeper: #2563B8; --color-personal-soft: rgba(88, 158, 245, 0.12); --color-personal-paper: #F3F8FE; /* Second color — green series (former personal) */ --color-second: #6BCB2A; --color-second-light: #8AD94F; --color-second-dark: #4FA81A; --color-second-deeper: #2F6B14; --color-second-soft: rgba(107, 203, 42, 0.12); --color-second-paper: #F7FBF3; /* Legacy aliases (map to personal by default; theme overrides accent) */ --color-primary: var(--color-personal); --color-primary-light: var(--color-personal-light); --color-primary-dark: var(--color-personal-dark); --color-primary-contrast: #FFFFFF; --color-secondary: var(--color-second); --color-secondary-light: var(--color-second-light); --color-secondary-dark: var(--color-second-dark); --color-secondary-contrast: #FFFFFF; /* Neutrals */ --color-white: #FFFFFF; --color-gray-50: #F7F8FA; --color-gray-100: #EEF0F4; --color-gray-200: #DDE1E8; --color-gray-300: #C5CBD5; --color-gray-400: #9AA3B2; --color-gray-500: #6B7585; --color-gray-600: #4A5568; --color-gray-700: #2D3748; --color-gray-800: #1A202C; --color-gray-900: #0D1117; --color-black: #000000; /* Semantic (neutral of theme; error stays red family for meaning) */ --color-success: #4FA81A; --color-warning: #E6A817; --color-error: #C0392B; --color-info: #3B82E0; /* Brochure-style yellow highlighter for key phrases */ --color-highlight: #FFE600; /* Text */ --color-text-primary: #222222; --color-text-secondary: #555555; --color-text-muted: #777777; --color-text-inverse: #FFFFFF; --color-text-on-hero: #222222; /* Background base */ --color-bg-default: #FFFFFF; --color-bg-elevated: #FFFFFF; --color-border: #DDE1E8; --color-border-light: #EEF0F4; --color-border-dark: #C5CBD5; /* Results summary prestige panel (dark + gold; synced with design.json resultsSummary) */ --color-results-summary-bg: #0D0D0D; --color-results-summary-bg-soft: #161616; --color-results-summary-gold-start: #FFF6C8; --color-results-summary-gold-mid: #E8C45A; --color-results-summary-gold-end: #B8860B; --color-results-summary-label: #F2F2F2; --color-results-summary-label-muted: #C8C8C8; /* Typography */ --font-primary: "Pretendard", "Noto Sans KR", sans-serif; --font-display: "Pretendard", "Noto Sans KR", sans-serif; --font-gyeonggi-title: "GyeonggiTitle", sans-serif; --font-gyeonggi-batang: "GyeonggiBatang", serif; --font-jalnan: "Jalnan 2", sans-serif; --font-mono: "D2Coding", "Consolas", monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px; --font-size-5xl: 48px; --font-size-hero-brand: clamp(2rem, 5vw, 3.5rem); --font-size-hero-headline: clamp(1.25rem, 3vw, 1.75rem); --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --spacing-4xl: 96px; /* Radius */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgba(34, 34, 34, 0.06); --shadow-md: 0 4px 12px rgba(34, 34, 34, 0.08); --shadow-lg: 0 12px 28px rgba(34, 34, 34, 0.12); /* Transitions */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --ease-out: ease-out; --ease-in-out: ease-in-out; /* Layout — heights from design.json components.header */ --header-height: 72px; --container-max: 1400px; --container-padding: 16px; /* * Shared inner-page banner height (matches .about-banner). * title stack + scaled "01" glyph + equal block padding ≈ 190px on large screens. */ --page-banner-brand: clamp(1.05rem, 2.5vw, 1.65rem); --page-banner-lead: clamp(1.7rem, 4vw, 2.7rem); --page-banner-gap: 0.22rem; --page-banner-title-h: calc( var(--page-banner-brand) + var(--page-banner-gap) + var(--page-banner-lead) ); --page-banner-content-h: calc(var(--page-banner-title-h) * 1.28); --page-banner-pad-y: var(--spacing-2xl); --page-banner-height: calc( var(--page-banner-content-h) + (var(--page-banner-pad-y) * 2) ); /* Nav — sized to sit with the logo inside the max-width header */ --nav-font-size: 13px; --nav-font-weight: 600; --nav-link-padding-y: 5px; --nav-link-padding-x: 10px; /* Z-index */ --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1400; /* Default theme tokens = personal (blue) until data-theme is set */ --color-accent: var(--color-personal); --color-accent-light: var(--color-personal-light); --color-accent-dark: var(--color-personal-dark); --color-accent-deeper: var(--color-personal-deeper); --color-accent-soft: var(--color-personal-soft); --color-accent-contrast: #FFFFFF; --color-bg-paper: var(--color-personal-paper); --color-bg-banner: var(--color-personal); /* Footer is theme-independent — charcoal from brand reference swatch */ --color-bg-footer: #383838; --color-text-brand: var(--color-personal); --color-bg-hero: #FFFFFF; /* Site accent palettes — admin / data-accent */ --palette-orange: #E85A0C; --palette-orange-light: #EC8046; --palette-orange-dark: #BC4605; --palette-orange-deeper: #8D3301; --palette-orange-bg: #FFF9F4; --palette-orange-paper: #FFE8D6; --palette-red: #E23B3B; --palette-red-light: #E47676; --palette-red-dark: #D01A1A; --palette-red-deeper: #A61111; --palette-red-bg: #FFF8F8; --palette-red-paper: #FFE8E8; --palette-blue: #3B82E0; --palette-blue-light: #76A5E2; --palette-blue-dark: #1B68CD; --palette-blue-deeper: #1250A3; --palette-blue-bg: #F0F6FD; --palette-blue-paper: #E3EEFB; --palette-green: #4FA81A; --palette-green-light: #6AD42C; --palette-green-dark: #3A7E11; --palette-green-deeper: #255309; --palette-green-bg: #F3FAEE; --palette-green-paper: #E5F5D8; --palette-purple: #7B61C9; --palette-purple-light: #A392D5; --palette-purple-dark: #5C3CBB; --palette-purple-deeper: #482D97; --palette-purple-bg: #F9F7FC; --palette-purple-paper: #EBE4F7; --palette-pink: #D63A7A; --palette-pink-light: #DB729D; --palette-pink-dark: #BB2261; --palette-pink-deeper: #92184A; --palette-pink-bg: #FDF8FB; --palette-pink-paper: #F9E4EE; --palette-shadcn: #0A0A0A; --palette-shadcn-light: #292929; --palette-shadcn-dark: #000000; --palette-shadcn-deeper: #000000; --palette-shadcn-bg: #FFFFFF; --palette-shadcn-paper: #F5F5F5; --palette-shadcnblocks: #0A0A0A; --palette-shadcnblocks-light: #292929; --palette-shadcnblocks-dark: #000000; --palette-shadcnblocks-deeper: #000000; --palette-shadcnblocks-bg: #FAFAFA; --palette-shadcnblocks-paper: #F5F5F5; --palette-vercel: #000000; --palette-vercel-light: #1F1F1F; --palette-vercel-dark: #000000; --palette-vercel-deeper: #000000; --palette-vercel-bg: #FCFCFC; --palette-vercel-paper: #F5F5F5; --palette-supabase: #2BA86F; --palette-supabase-light: #49C78E; --palette-supabase-dark: #1E8254; --palette-supabase-deeper: #135A3A; --palette-supabase-bg: #FCFCFC; --palette-supabase-paper: #EDEDED; --palette-linear: #555FBF; --palette-linear-light: #858CCC; --palette-linear-dark: #3B45A6; --palette-linear-deeper: #2C3482; --palette-linear-bg: #FCFCFD; --palette-linear-paper: #F0F1F8; --palette-claude: #B4532A; --palette-claude-light: #CD744E; --palette-claude-dark: #8D3F1E; --palette-claude-deeper: #652B13; --palette-claude-bg: #FAF8F1; --palette-claude-paper: #E9E6DC; --palette-claymorphism: #6366F1; --palette-claymorphism-light: #A0A1F1; --palette-claymorphism-dark: #3034F1; --palette-claymorphism-deeper: #0A0EE4; --palette-claymorphism-bg: #E7E5E4; --palette-claymorphism-paper: #F5F5F4; --palette-amber: #D97706; --palette-amber-light: #EE952E; --palette-amber-dark: #AB5C01; --palette-amber-deeper: #794100; --palette-amber-bg: #FFFFFF; --palette-amber-paper: #F3F4F6; --palette-cleanslate: #6366F1; --palette-cleanslate-light: #A0A1F1; --palette-cleanslate-dark: #3034F1; --palette-cleanslate-deeper: #0A0EE4; --palette-cleanslate-bg: #F8FAFC; --palette-cleanslate-paper: #E5E7EB; --palette-citrus: #65A30D; --palette-citrus-light: #86D21C; --palette-citrus-dark: #487607; --palette-citrus-deeper: #2B4802; --palette-citrus-bg: #FFFFFF; --palette-citrus-paper: #F3FBE6; --palette-falcon: #464C65; --palette-falcon-light: #616887; --palette-falcon-dark: #313547; --palette-falcon-deeper: #1C1E29; --palette-falcon-bg: #F7F7F9; --palette-falcon-paper: #E4E5EB; --palette-alpine: #0049AF; --palette-alpine-light: #0C64E0; --palette-alpine-dark: #00347C; --palette-alpine-deeper: #001E49; --palette-alpine-bg: #FCF5F7; --palette-alpine-paper: #EEF2FF; --palette-modern: #2563EB; --palette-modern-light: #648EE9; --palette-modern-dark: #0E4ACF; --palette-modern-deeper: #0738A3; --palette-modern-bg: #FFFFFF; --palette-modern-paper: #F3F4F6; --palette-stripe: #533AFD; --palette-stripe-light: #8D7DF7; --palette-stripe-dark: #2505FF; --palette-stripe-deeper: #1B00D1; --palette-stripe-bg: #FFFFFF; --palette-stripe-paper: #F3F1FF; } /* data-theme=green → personal (blue) page theme */ html[data-theme="green"], body[data-theme="green"] { --color-accent: var(--color-personal); --color-accent-light: var(--color-personal-light); --color-accent-dark: var(--color-personal-dark); --color-accent-deeper: var(--color-personal-deeper); --color-accent-soft: var(--color-personal-soft); --color-accent-contrast: #FFFFFF; --color-bg-paper: var(--color-personal-paper); --color-bg-banner: var(--color-personal); --color-text-brand: var(--color-personal); --color-primary: var(--color-personal); --color-primary-light: var(--color-personal-light); --color-primary-dark: var(--color-personal-dark); } /* data-theme=red → second (green) page theme */ html[data-theme="red"], body[data-theme="red"] { --color-accent: var(--color-second); --color-accent-light: var(--color-second-light); --color-accent-dark: var(--color-second-dark); --color-accent-deeper: var(--color-second-deeper); --color-accent-soft: var(--color-second-soft); --color-accent-contrast: #FFFFFF; --color-bg-paper: var(--color-second-paper); --color-bg-banner: var(--color-second); --color-text-brand: var(--color-second); --color-primary: var(--color-second); --color-primary-light: var(--color-second-light); --color-primary-dark: var(--color-second-dark); } /* * Saved site accent (data-accent). Listed after data-theme so an admin * choice overrides the per-page green/red fallback on both html and body. * Each theme also paints page background (--color-bg-default / hero). */ html[data-accent="orange"], body[data-accent="orange"] { --color-accent: var(--palette-orange); --color-accent-light: var(--palette-orange-light); --color-accent-dark: var(--palette-orange-dark); --color-accent-deeper: var(--palette-orange-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-orange) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-orange-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-orange-bg); --color-bg-paper: var(--palette-orange-paper); --color-bg-banner: var(--palette-orange); --color-text-brand: var(--palette-orange-dark); --color-primary: var(--palette-orange); --color-primary-light: var(--palette-orange-light); --color-primary-dark: var(--palette-orange-dark); } html[data-accent="red"], body[data-accent="red"] { --color-accent: var(--palette-red); --color-accent-light: var(--palette-red-light); --color-accent-dark: var(--palette-red-dark); --color-accent-deeper: var(--palette-red-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-red) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-red-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-red-bg); --color-bg-paper: var(--palette-red-paper); --color-bg-banner: var(--palette-red); --color-text-brand: var(--palette-red-dark); --color-primary: var(--palette-red); --color-primary-light: var(--palette-red-light); --color-primary-dark: var(--palette-red-dark); } html[data-accent="blue"], body[data-accent="blue"] { --color-accent: var(--palette-blue); --color-accent-light: var(--palette-blue-light); --color-accent-dark: var(--palette-blue-dark); --color-accent-deeper: var(--palette-blue-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-blue) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-blue-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-blue-bg); --color-bg-paper: var(--palette-blue-paper); --color-bg-banner: var(--palette-blue); --color-text-brand: var(--palette-blue-dark); --color-primary: var(--palette-blue); --color-primary-light: var(--palette-blue-light); --color-primary-dark: var(--palette-blue-dark); } html[data-accent="green"], body[data-accent="green"] { --color-accent: var(--palette-green); --color-accent-light: var(--palette-green-light); --color-accent-dark: var(--palette-green-dark); --color-accent-deeper: var(--palette-green-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-green) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-green-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-green-bg); --color-bg-paper: var(--palette-green-paper); --color-bg-banner: var(--palette-green); --color-text-brand: var(--palette-green-dark); --color-primary: var(--palette-green); --color-primary-light: var(--palette-green-light); --color-primary-dark: var(--palette-green-dark); } html[data-accent="purple"], body[data-accent="purple"] { --color-accent: var(--palette-purple); --color-accent-light: var(--palette-purple-light); --color-accent-dark: var(--palette-purple-dark); --color-accent-deeper: var(--palette-purple-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-purple) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-purple-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-purple-bg); --color-bg-paper: var(--palette-purple-paper); --color-bg-banner: var(--palette-purple); --color-text-brand: var(--palette-purple-dark); --color-primary: var(--palette-purple); --color-primary-light: var(--palette-purple-light); --color-primary-dark: var(--palette-purple-dark); } html[data-accent="pink"], body[data-accent="pink"] { --color-accent: var(--palette-pink); --color-accent-light: var(--palette-pink-light); --color-accent-dark: var(--palette-pink-dark); --color-accent-deeper: var(--palette-pink-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-pink) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-pink-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-pink-bg); --color-bg-paper: var(--palette-pink-paper); --color-bg-banner: var(--palette-pink); --color-text-brand: var(--palette-pink-dark); --color-primary: var(--palette-pink); --color-primary-light: var(--palette-pink-light); --color-primary-dark: var(--palette-pink-dark); } html[data-accent="shadcn"], body[data-accent="shadcn"] { --color-accent: var(--palette-shadcn); --color-accent-light: var(--palette-shadcn-light); --color-accent-dark: var(--palette-shadcn-dark); --color-accent-deeper: var(--palette-shadcn-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-shadcn) 10%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-shadcn-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-shadcn-bg); --color-bg-paper: var(--palette-shadcn-paper); --color-bg-banner: var(--palette-shadcn); --color-text-brand: var(--palette-shadcn); --color-primary: var(--palette-shadcn); --color-primary-light: var(--palette-shadcn-light); --color-primary-dark: var(--palette-shadcn-dark); } html[data-accent="shadcnblocks"], body[data-accent="shadcnblocks"] { --color-accent: var(--palette-shadcnblocks); --color-accent-light: var(--palette-shadcnblocks-light); --color-accent-dark: var(--palette-shadcnblocks-dark); --color-accent-deeper: var(--palette-shadcnblocks-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-shadcnblocks) 10%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-shadcnblocks-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-shadcnblocks-bg); --color-bg-paper: var(--palette-shadcnblocks-paper); --color-bg-banner: var(--palette-shadcnblocks); --color-text-brand: var(--palette-shadcnblocks); --color-primary: var(--palette-shadcnblocks); --color-primary-light: var(--palette-shadcnblocks-light); --color-primary-dark: var(--palette-shadcnblocks-dark); } html[data-accent="vercel"], body[data-accent="vercel"] { --color-accent: var(--palette-vercel); --color-accent-light: var(--palette-vercel-light); --color-accent-dark: var(--palette-vercel-dark); --color-accent-deeper: var(--palette-vercel-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-vercel) 10%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-vercel-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-vercel-bg); --color-bg-paper: var(--palette-vercel-paper); --color-bg-banner: var(--palette-vercel); --color-text-brand: var(--palette-vercel); --color-primary: var(--palette-vercel); --color-primary-light: var(--palette-vercel-light); --color-primary-dark: var(--palette-vercel-dark); } html[data-accent="supabase"], body[data-accent="supabase"] { --color-accent: var(--palette-supabase); --color-accent-light: var(--palette-supabase-light); --color-accent-dark: var(--palette-supabase-dark); --color-accent-deeper: var(--palette-supabase-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-supabase) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-supabase-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-supabase-bg); --color-bg-paper: var(--palette-supabase-paper); --color-bg-banner: var(--palette-supabase); --color-text-brand: var(--palette-supabase-dark); --color-primary: var(--palette-supabase); --color-primary-light: var(--palette-supabase-light); --color-primary-dark: var(--palette-supabase-dark); } html[data-accent="linear"], body[data-accent="linear"] { --color-accent: var(--palette-linear); --color-accent-light: var(--palette-linear-light); --color-accent-dark: var(--palette-linear-dark); --color-accent-deeper: var(--palette-linear-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-linear) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-linear-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-linear-bg); --color-bg-paper: var(--palette-linear-paper); --color-bg-banner: var(--palette-linear); --color-text-brand: var(--palette-linear-dark); --color-primary: var(--palette-linear); --color-primary-light: var(--palette-linear-light); --color-primary-dark: var(--palette-linear-dark); } html[data-accent="claude"], body[data-accent="claude"] { --color-accent: var(--palette-claude); --color-accent-light: var(--palette-claude-light); --color-accent-dark: var(--palette-claude-dark); --color-accent-deeper: var(--palette-claude-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-claude) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-claude-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-claude-bg); --color-bg-paper: var(--palette-claude-paper); --color-bg-banner: var(--palette-claude); --color-text-brand: var(--palette-claude-dark); --color-primary: var(--palette-claude); --color-primary-light: var(--palette-claude-light); --color-primary-dark: var(--palette-claude-dark); } html[data-accent="claymorphism"], body[data-accent="claymorphism"] { --color-accent: var(--palette-claymorphism); --color-accent-light: var(--palette-claymorphism-light); --color-accent-dark: var(--palette-claymorphism-dark); --color-accent-deeper: var(--palette-claymorphism-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-claymorphism) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-claymorphism-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-claymorphism-bg); --color-bg-paper: var(--palette-claymorphism-paper); --color-bg-banner: var(--palette-claymorphism); --color-text-brand: var(--palette-claymorphism-dark); --color-primary: var(--palette-claymorphism); --color-primary-light: var(--palette-claymorphism-light); --color-primary-dark: var(--palette-claymorphism-dark); } html[data-accent="amber"], body[data-accent="amber"] { --color-accent: var(--palette-amber); --color-accent-light: var(--palette-amber-light); --color-accent-dark: var(--palette-amber-dark); --color-accent-deeper: var(--palette-amber-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-amber) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-amber-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-amber-bg); --color-bg-paper: var(--palette-amber-paper); --color-bg-banner: var(--palette-amber); --color-text-brand: var(--palette-amber-dark); --color-primary: var(--palette-amber); --color-primary-light: var(--palette-amber-light); --color-primary-dark: var(--palette-amber-dark); } html[data-accent="cleanslate"], body[data-accent="cleanslate"] { --color-accent: var(--palette-cleanslate); --color-accent-light: var(--palette-cleanslate-light); --color-accent-dark: var(--palette-cleanslate-dark); --color-accent-deeper: var(--palette-cleanslate-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-cleanslate) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-cleanslate-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-cleanslate-bg); --color-bg-paper: var(--palette-cleanslate-paper); --color-bg-banner: var(--palette-cleanslate); --color-text-brand: var(--palette-cleanslate-dark); --color-primary: var(--palette-cleanslate); --color-primary-light: var(--palette-cleanslate-light); --color-primary-dark: var(--palette-cleanslate-dark); } html[data-accent="citrus"], body[data-accent="citrus"] { --color-accent: var(--palette-citrus); --color-accent-light: var(--palette-citrus-light); --color-accent-dark: var(--palette-citrus-dark); --color-accent-deeper: var(--palette-citrus-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-citrus) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-citrus-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-citrus-bg); --color-bg-paper: var(--palette-citrus-paper); --color-bg-banner: var(--palette-citrus); --color-text-brand: var(--palette-citrus-dark); --color-primary: var(--palette-citrus); --color-primary-light: var(--palette-citrus-light); --color-primary-dark: var(--palette-citrus-dark); } html[data-accent="falcon"], body[data-accent="falcon"] { --color-accent: var(--palette-falcon); --color-accent-light: var(--palette-falcon-light); --color-accent-dark: var(--palette-falcon-dark); --color-accent-deeper: var(--palette-falcon-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-falcon) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-falcon-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-falcon-bg); --color-bg-paper: var(--palette-falcon-paper); --color-bg-banner: var(--palette-falcon); --color-text-brand: var(--palette-falcon); --color-primary: var(--palette-falcon); --color-primary-light: var(--palette-falcon-light); --color-primary-dark: var(--palette-falcon-dark); } html[data-accent="alpine"], body[data-accent="alpine"] { --color-accent: var(--palette-alpine); --color-accent-light: var(--palette-alpine-light); --color-accent-dark: var(--palette-alpine-dark); --color-accent-deeper: var(--palette-alpine-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-alpine) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-alpine-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-alpine-bg); --color-bg-paper: var(--palette-alpine-paper); --color-bg-banner: var(--palette-alpine); --color-text-brand: var(--palette-alpine-dark); --color-primary: var(--palette-alpine); --color-primary-light: var(--palette-alpine-light); --color-primary-dark: var(--palette-alpine-dark); } html[data-accent="modern"], body[data-accent="modern"] { --color-accent: var(--palette-modern); --color-accent-light: var(--palette-modern-light); --color-accent-dark: var(--palette-modern-dark); --color-accent-deeper: var(--palette-modern-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-modern) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-modern-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-modern-bg); --color-bg-paper: var(--palette-modern-paper); --color-bg-banner: var(--palette-modern); --color-text-brand: var(--palette-modern-dark); --color-primary: var(--palette-modern); --color-primary-light: var(--palette-modern-light); --color-primary-dark: var(--palette-modern-dark); } html[data-accent="stripe"], body[data-accent="stripe"] { --color-accent: var(--palette-stripe); --color-accent-light: var(--palette-stripe-light); --color-accent-dark: var(--palette-stripe-dark); --color-accent-deeper: var(--palette-stripe-deeper); --color-accent-soft: color-mix(in srgb, var(--palette-stripe) 12%, transparent); --color-accent-contrast: #FFFFFF; --color-bg-default: var(--palette-stripe-bg); --color-bg-elevated: #FFFFFF; --color-bg-hero: var(--palette-stripe-bg); --color-bg-paper: var(--palette-stripe-paper); --color-bg-banner: var(--palette-stripe); --color-text-brand: var(--palette-stripe-dark); --color-primary: var(--palette-stripe); --color-primary-light: var(--palette-stripe-light); --color-primary-dark: var(--palette-stripe-dark); } @media (min-width: 1024px) { :root { --header-height: 88px; --container-padding: 24px; --nav-font-size: 13px; --nav-link-padding-y: 5px; --nav-link-padding-x: 12px; } } @media (min-width: 1280px) { :root { --header-height: 96px; --nav-font-size: 14px; --nav-link-padding-x: 14px; } }