/* ========================================================================== GWANGGYO BARUN — DESIGN TOKENS v2 Superhuman-inspired luxury design system, anchored on the clinic palette. Single source of truth. Update this file to retheme every deck. ========================================================================== */ :root { /* ------------------------------------------------------------------------ COLOR SYSTEM ----------------------------------------------------------------------- Adapted from Superhuman's restraint principle: "Maximum confidence through minimum decoration." One dramatic dark gesture (hero), white canvas everywhere else, a single soft accent for emphasis. ------------------------------------------------------------------------ */ /* PRIMARY — Brand navy spectrum (replaces Superhuman's Mysteria) */ --color-navy: #003366; /* Brand Navy — titles, primary mark */ --color-navy-deep: #07193A; /* Deepest tone for hero gradient end */ --color-navy-mid: #1A2C4D; /* Mid-tone for hero gradient blend */ /* ACCENT — Soft steel blue (replaces Lavender Glow) */ --color-steel: #5B9BD5; /* Brand Steel Blue — only true accent */ --color-steel-deep: #2C5F8D; /* Deeper steel for press states */ --color-sky: #BFE0FF; /* Sky highlight on dark surfaces */ /* INK — Warm dark text (replaces Charcoal Ink) */ --color-ink: #1E293B; /* Primary text on light surfaces */ --color-ink-soft: #334155; /* Slightly softer, secondary text */ --color-slate: #64748B; /* Tertiary text, captions, meta */ --color-slate-soft: #94A3B8; /* Subtle labels */ /* SURFACES */ --color-canvas: #FFFFFF; /* Pure white — primary slide canvas */ --color-canvas-warm: #FAFAF7; /* Warm white for subtle sections */ --color-cream: #F4F1EB; /* Warm cream — luxury button bg */ --color-cream-deep: #E9E5DD; /* Deeper cream for press states */ /* BORDERS — Cool, restrained */ --color-border: #E2E8F0; /* Default card / divider border */ --color-border-soft: #EDF2F7; /* Subtle separator */ --color-border-strong: #CBD5E1; /* Stronger border, dashed lines */ /* TRANSLUCENT WHITES — for use on dark hero surfaces */ --color-white-95: rgba(255, 255, 255, 0.95); --color-white-80: rgba(255, 255, 255, 0.80); --color-white-60: rgba(255, 255, 255, 0.60); --color-white-30: rgba(255, 255, 255, 0.30); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-08: rgba(255, 255, 255, 0.08); /* SEMANTIC — used surgically, never for decoration */ --color-warning: #C2410C; /* Restrained warning (deeper than orange) */ --color-warning-bg: #FFF7ED; --color-warning-border: #F4CFA6; /* Soft amber outline for warning cards */ --color-danger: #B91C1C; /* Deep red — only for true alarms */ --color-danger-bg: #FEF2F2; --color-danger-border: #EEC2C2; /* Soft red outline for danger cards */ --color-success: #15803D; /* Restrained success — "recommended / top priority" */ --color-success-bg: #E7F4EC; /* Light success tint for callout rows */ --color-success-border: #AED7C0; /* Soft green outline for success/normal cards */ /* ------------------------------------------------------------------------ TYPOGRAPHY — Pretendard Variable ONLY ----------------------------------------------------------------------- Pretendard's Variable axis enables non-standard weight stops (450, 540) inspired by Superhuman's Super Sans VF. ------------------------------------------------------------------------ */ --font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Type scale — 16:9 slide optimized (1280x720 base) */ --text-display-xl: 6.5rem; /* 104px — hero numbers, mega digits */ --text-display-lg: 4.5rem; /* 72px — cover slide title */ --text-display: 3rem; /* 48px — section title (default) */ --text-h1: 2.25rem; /* 36px — alt title size */ --text-h2: 1.625rem; /* 26px — subtitle */ --text-h3: 1.375rem; /* 22px — body emphasis */ --text-body-lg: 1.125rem; /* 18px — body */ --text-body: 1rem; /* 16px — default reading */ --text-sm: 0.875rem; /* 14px — caption */ --text-xs: 0.75rem; /* 12px — micro label */ --text-micro: 0.6875rem; /* 11px — chapter eyebrow */ /* Weights — Pretendard Variable supports any integer 100-900 */ --weight-light: 300; --weight-regular: 400; --weight-450: 450; /* Subtle "more than regular" */ --weight-medium: 500; --weight-540: 540; /* Display weight, between medium & semibold */ --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Line heights */ --lh-display: 0.96; /* Compressed display — Superhuman signature */ --lh-tight: 1.10; --lh-snug: 1.25; --lh-normal: 1.50; --lh-relaxed: 1.65; /* Letter spacing — surgical use only */ --tracking-tight: -0.035em; /* For 48px+ headlines */ --tracking-snug: -0.02em; /* For 24-36px headlines */ --tracking-normal: 0; /* Body text */ --tracking-wide: 0.12em; /* Small caps, eyebrows */ --tracking-mega: -0.05em; /* Mega numbers (88px+) */ /* ------------------------------------------------------------------------ SPACING — 8px base scale ------------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ------------------------------------------------------------------------ RADIUS — Only two stops (Superhuman radical simplicity) ------------------------------------------------------------------------ */ --radius-sm: 8px; /* Buttons, badges, small chips */ --radius-lg: 16px; /* Cards, large containers */ /* ------------------------------------------------------------------------ ELEVATION — Restrained ------------------------------------------------------------------------ */ --shadow-soft: 0 1px 2px rgba(7, 25, 58, 0.04); --shadow-card: 0 2px 8px rgba(7, 25, 58, 0.06), 0 1px 2px rgba(7, 25, 58, 0.03); --shadow-elevated: 0 8px 24px rgba(7, 25, 58, 0.10), 0 2px 6px rgba(7, 25, 58, 0.05); /* ------------------------------------------------------------------------ SLIDE GEOMETRY — 16:9 only, no responsive ------------------------------------------------------------------------ */ --slide-width: 1280px; --slide-height: 720px; --slide-pad-x: 72px; /* Horizontal padding (luxurious) */ --slide-pad-y: 56px; /* Vertical padding */ }