/* ============================================================================= XmosaiX Design System — Design Tokens tokens/index.css Korean Men's Body Magazine · Dark Luxury · Editorial Version: 1.0.0 ============================================================================= */ /* ----------------------------------------------------------------------------- @font-face — Pretendard Variable (CDN) ----------------------------------------------------------------------------- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css'); /* Google Fonts — Playfair Display */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap'); /* ============================================================================= :root — All Design Tokens ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR TOKENS --------------------------------------------------------------------------- */ /* Background */ --color-bg-primary: #000000; --color-bg-secondary: #0a0a0a; --color-bg-tertiary: #111111; --color-bg-elevated: #181818; --color-bg-overlay: rgba(0, 0, 0, 0.92); --color-bg-overlay-light: rgba(0, 0, 0, 0.60); --color-bg-glass: rgba(10, 10, 10, 0.82); --color-bg-glass-border: rgba(255, 255, 255, 0.14); /* Surface */ --color-surface-1: #101010; --color-surface-2: #171717; --color-surface-3: #222222; --color-surface-hover: #2b2b2b; /* Accent — Titanium Hairline */ --color-accent: #c4c9cf; --color-accent-light: #dde2e7; --color-accent-lighter: #f3f5f7; --color-accent-dark: #969ea7; --color-accent-darker: #6d7580; --color-accent-muted: rgba(196, 201, 207, 0.10); --color-accent-muted-hover: rgba(196, 201, 207, 0.18); /* Text */ --color-text-primary: #ffffff; --color-text-secondary: #d6d6d6; --color-text-tertiary: #9a9a9a; --color-text-muted: #666666; --color-text-disabled: #4a4a4a; --color-text-inverse: #000000; --color-text-accent: #d7dce1; --color-text-accent-light: #f3f5f7; --color-text-on-accent: #0b0d10; /* Border */ --color-border-subtle: rgba(255, 255, 255, 0.08); --color-border-default: rgba(255, 255, 255, 0.14); --color-border-strong: rgba(255, 255, 255, 0.26); --color-border-accent: rgba(196, 201, 207, 0.34); --color-border-accent-strong: rgba(221, 226, 231, 0.52); /* State */ --color-focus-ring: rgba(221, 226, 231, 0.32); --color-error: #e05252; --color-error-bg: rgba(224, 82, 82, 0.12); --color-success: #52c78a; --color-success-bg: rgba(82, 199, 138, 0.12); --color-warning: #e0a832; --color-warning-bg: rgba(224, 168, 50, 0.12); /* Badge */ --color-badge-hot: #e04040; --color-badge-hot-bg: rgba(224, 64, 64, 0.15); --color-badge-new: #ffffff; --color-badge-new-bg: rgba(255, 255, 255, 0.15); --color-badge-adult: #8a52c8; --color-badge-adult-bg: rgba(138, 82, 200, 0.15); --color-badge-exclusive: #2196f3; --color-badge-exclusive-bg: rgba(33, 150, 243, 0.15); /* Gradient */ --gradient-warm: linear-gradient(135deg, #f3f5f7 0%, #c4c9cf 45%, #7e8791 100%); --gradient-warm-text: linear-gradient(90deg, #f3f5f7 0%, #d7dce1 38%, #8f98a2 100%); --gradient-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.95) 100%); --gradient-dark-overlay-strong: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,1) 100%); --gradient-hero: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.72) 65%, #000000 100%); --gradient-card: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.60) 40%, transparent 100%); --gradient-ambient: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(196,201,207,0.12) 0%, transparent 70%); --gradient-gallery-tone-warm: linear-gradient(165deg, #111111 0%, #1a1a1a 25%, #222222 50%, #141414 75%, #080808 100%); --gradient-gallery-tone-cool: linear-gradient(155deg, #0e1015 0%, #141820 30%, #1a2030 55%, #111518 80%, #080a0c 100%); --gradient-gallery-tone-mono: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 30%, #282828 55%, #151515 80%, #050505 100%); --gradient-portfolio-moody-1: linear-gradient(160deg, #111111 0%, #222222 50%, #111111 100%); --gradient-portfolio-moody-2: linear-gradient(200deg, #0a0a0a 0%, #191919 55%, #090909 100%); --gradient-portfolio-moody-3: linear-gradient(175deg, #0b0b0b 0%, #282828 45%, #0e0e0e 100%); --gradient-portfolio-moody-4: linear-gradient(145deg, #090909 0%, #1b1b1b 40%, #222222 70%, #090909 100%); --gradient-portfolio-moody-5: linear-gradient(190deg, #0e0e0e 0%, #222222 50%, #0b0b0b 100%); --gradient-portfolio-moody-6: linear-gradient(155deg, #080808 0%, #161616 40%, #222222 70%, #080808 100%); --gradient-portfolio-studio-1: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 50%, #d4d4d4 100%); --gradient-portfolio-studio-2: linear-gradient(150deg, #f2f2f2 0%, #fafafa 60%, #e0e0e0 100%); --gradient-portfolio-studio-3: linear-gradient(120deg, #dddddd 0%, #ececec 50%, #f8f8f8 100%); --gradient-portfolio-studio-4: linear-gradient(165deg, #e5e5e5 0%, #f0f0f0 50%, #cfcfcf 100%); --gradient-portfolio-bw-1: linear-gradient(170deg, #1a1a1a 0%, #3d3d3d 50%, #0f0f0f 100%); --gradient-portfolio-bw-2: linear-gradient(155deg, #0f0f0f 0%, #2e2e2e 40%, #444444 75%, #1a1a1a 100%); --gradient-portfolio-bw-3: linear-gradient(140deg, #252525 0%, #3a3a3a 50%, #101010 100%); --gradient-portfolio-bw-4: linear-gradient(175deg, #101010 0%, #404040 45%, #000000 100%); --gradient-portfolio-editorial-1: linear-gradient(120deg, #1d1d1d 0%, #2a2a2a 50%, #151515 100%); --gradient-portfolio-editorial-2: linear-gradient(140deg, #181818 0%, #242424 50%, #1a1a1a 100%); --gradient-portfolio-water-1: linear-gradient(160deg, #0a1520 0%, #1a3040 50%, #0d1d2a 100%); --gradient-portfolio-water-2: linear-gradient(145deg, #080f18 0%, #142030 40%, #1c3848 70%, #0a1520 100%); --gradient-cover-21: linear-gradient(160deg, #111111 0%, #252525 50%, #0a0a0a 100%); --gradient-cover-20: linear-gradient(180deg, #2d1810, #4a2818, #111111); --gradient-cover-19: linear-gradient(160deg, #0f1a10, #1a3020, #0a1208); --gradient-cover-18: linear-gradient(140deg, #0a0f1a, #101830, #0a0a1a); --gradient-cover-17: linear-gradient(180deg, #1a1a1a, #2d2d2d, #0f0f0f); --gradient-cover-16: linear-gradient(155deg, #1a0a1a, #2d1030, #0a0812); --gradient-cover-15: linear-gradient(170deg, #0a1510, #152518, #080e0a); --gradient-cover-14: linear-gradient(145deg, #12080a, #2a1015, #0c0608); --gradient-cover-13: linear-gradient(165deg, #0f100a, #1e2010, #0a0b08); --gradient-cover-first: linear-gradient(150deg, #0d0a1a, #1a1035, #2d2010, #0a0a0a); /* --------------------------------------------------------------------------- TYPOGRAPHY TOKENS --------------------------------------------------------------------------- */ /* Font Families */ --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Font Sizes — fluid via clamp() */ --text-3xs: 0.625rem; /* 10px */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ --text-9xl: 8rem; /* 128px */ /* Fluid Display Sizes */ --text-display-sm: clamp(2.25rem, 4vw, 3rem); --text-display-md: clamp(3rem, 6vw, 4.5rem); --text-display-lg: clamp(4rem, 8vw, 6rem); --text-display-hero: clamp(5rem, 12vw, 9rem); /* Font Weights */ --weight-thin: 100; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.15em; --tracking-ultra: 0.25em; /* --------------------------------------------------------------------------- SPACING TOKENS --------------------------------------------------------------------------- */ --space-px: 1px; --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-18: 4.5rem; /* 72px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* Section vertical rhythm */ --section-sm: clamp(3rem, 6vw, 5rem); --section-md: clamp(5rem, 8vw, 8rem); --section-lg: clamp(6rem, 10vw, 12rem); --section-xl: clamp(8rem, 14vw, 16rem); /* --------------------------------------------------------------------------- BORDER RADIUS TOKENS --------------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-4xl: 32px; --radius-full: 9999px; /* --------------------------------------------------------------------------- SHADOW TOKENS --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 2px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.5); --shadow-xl: 0 16px 48px rgba(0,0,0,0.8), 0 8px 16px rgba(0,0,0,0.6); --shadow-2xl: 0 24px 64px rgba(0,0,0,0.9), 0 12px 24px rgba(0,0,0,0.7); /* Titanium glow shadows */ --shadow-accent-sm: 0 2px 8px rgba(196,201,207,0.16); --shadow-accent-md: 0 4px 16px rgba(196,201,207,0.22), 0 2px 6px rgba(196,201,207,0.14); --shadow-accent-lg: 0 8px 32px rgba(196,201,207,0.26), 0 4px 12px rgba(196,201,207,0.18); --shadow-accent-glow: 0 0 40px rgba(196,201,207,0.18), 0 0 80px rgba(196,201,207,0.08); /* Card specific */ --shadow-card: 0 2px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.7), 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(196,201,207,0.10); /* --------------------------------------------------------------------------- Z-INDEX TOKENS --------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-nav: 900; --z-age-gate: 1000; /* --------------------------------------------------------------------------- TRANSITION & ANIMATION TOKENS --------------------------------------------------------------------------- */ /* Durations */ --duration-instant: 50ms; --duration-fast: 100ms; --duration-normal: 200ms; --duration-moderate: 300ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 800ms; --duration-entrance: 1000ms; /* Easings */ --ease-linear: linear; --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-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Shorthand transitions */ --transition-fast: all var(--duration-fast) var(--ease-out); --transition-normal: all var(--duration-normal) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-editorial); --transition-color: color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); --transition-transform: transform var(--duration-moderate) var(--ease-smooth); --transition-opacity: opacity var(--duration-normal) var(--ease-out); /* --------------------------------------------------------------------------- LAYOUT TOKENS --------------------------------------------------------------------------- */ /* Container widths */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-3xl: 1600px; /* Nav */ --nav-height: 72px; --nav-height-sm: 60px; --nav-blur: 20px; /* Content padding */ --content-padding-x: clamp(1rem, 4vw, 3rem); --content-padding-y: clamp(1.5rem, 4vw, 2.5rem); /* Grid */ --grid-columns: 12; --grid-gap: clamp(0.75rem, 2vw, 1.5rem); --grid-gap-sm: clamp(0.5rem, 1.5vw, 1rem); --grid-gap-lg: clamp(1rem, 3vw, 2rem); /* --------------------------------------------------------------------------- BLUR / BACKDROP TOKENS --------------------------------------------------------------------------- */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; /* --------------------------------------------------------------------------- ASPECT RATIO TOKENS --------------------------------------------------------------------------- */ --ratio-portrait: 3 / 4; --ratio-square: 1 / 1; --ratio-landscape: 4 / 3; --ratio-wide: 16 / 9; --ratio-cinema: 21 / 9; --ratio-cover: 2 / 3; } /* ============================================================================= Light mode overrides (minimal — brand is dark-first) ============================================================================= */ @media (prefers-color-scheme: light) { :root { /* Only override absolute necessities — XmosaiX is dark-first */ --color-bg-primary: #f8f8f8; --color-bg-secondary: #f0f0f0; --color-bg-tertiary: #e8e8e8; --color-bg-elevated: #ffffff; --color-bg-overlay: rgba(248, 248, 248, 0.92); --color-bg-glass: rgba(248, 248, 248, 0.85); --color-surface-1: #f0f0f0; --color-surface-2: #e8e8e8; --color-surface-3: #dddddd; --color-text-primary: #1a1a1a; --color-text-secondary: #3c3c3c; --color-text-tertiary: #6a6a6a; --color-text-muted: #9a9a9a; --color-text-disabled: #c0c0c0; --color-text-inverse: #f0f0f0; --color-border-subtle: rgba(26, 26, 26, 0.06); --color-border-default: rgba(26, 26, 26, 0.12); --color-border-strong: rgba(26, 26, 26, 0.24); --shadow-card: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.08); } }