/* Generated from tokens.json. Resolves primitives and semantic aliases into plain CSS custom properties for both themes. The Claude artifact runtime generates this automatically; outside the artifact, load this file before fonts.css and bundle.css. Dark is the default theme; add data-theme="light" to or a container to opt into the light theme. */ :root { --red-50: #fdecea; --red-100: #f4cdc9; --red-300: #e05244; --red-500: #9b0c02; --red-700: #6a0701; --red-900: #3d0400; --neutral-0: #ffffff; --neutral-50: #faf9f8; --neutral-100: #f4f2f1; --neutral-200: #ddd8d7; --neutral-300: #c9c2c0; --neutral-400: #8c8583; --neutral-500: #767070; --neutral-600: #565150; --neutral-700: #2f2b2a; --neutral-800: #221f1e; --neutral-900: #161616; --neutral-950: #0b0b0b; --neutral-1000: #000000; --green-50: #e6f4ee; --green-400: #3ddc97; --green-700: #0f6b4f; --green-950: #0f2019; --amber-50: #fdf1d8; --amber-400: #f5b638; --amber-700: #7a5200; --amber-950: #231a06; --coral-50: #fcebe9; --coral-400: #ff6f61; --coral-700: #b3261e; --coral-950: #280f0c; --blue-50: #e8f0fe; --blue-400: #8ab4ff; --blue-700: #1d4ed8; --blue-950: #101c2e; --surface-scrim: #000000b8; --font-display: Anton, "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif; --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif; --display-xl-font-size: 2.25rem; --display-xl-line-height: 2.125rem; --display-xl-font-weight: 400; --display-xl-letter-spacing: 0.01em; --display-lg-font-size: 1.75rem; --display-lg-line-height: 1.75rem; --display-lg-font-weight: 400; --display-lg-letter-spacing: 0.01em; --display-md-font-size: 1.375rem; --display-md-line-height: 1.375rem; --display-md-font-weight: 400; --display-md-letter-spacing: 0.015em; --display-sm-font-size: 1.125rem; --display-sm-line-height: 1.25rem; --display-sm-font-weight: 400; --display-sm-letter-spacing: 0.02em; --chip-font-size: 1rem; --chip-line-height: 1rem; --chip-font-weight: 400; --chip-letter-spacing: 0.04em; --body-lg-font-size: 1.125rem; --body-lg-line-height: 1.75rem; --body-lg-font-weight: 400; --body-font-size: 1rem; --body-line-height: 1.5rem; --body-font-weight: 400; --body-strong-font-size: 1rem; --body-strong-line-height: 1.5rem; --body-strong-font-weight: 700; --body-sm-font-size: 0.875rem; --body-sm-line-height: 1.25rem; --body-sm-font-weight: 400; --label-font-size: 0.875rem; --label-line-height: 1.25rem; --label-font-weight: 700; --caption-font-size: 0.75rem; --caption-line-height: 1.125rem; --caption-font-weight: 400; --eyebrow-font-size: 0.75rem; --eyebrow-line-height: 1rem; --eyebrow-font-weight: 700; --eyebrow-letter-spacing: 0.14em; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --radius-none: 0; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-pill: 9999px; --screen-sm: 30rem; --screen-md: 48rem; --screen-lg: 64rem; --screen-xl: 80rem; --container-sm: 40rem; --container-md: 60rem; --container-lg: 75rem; --gutter-mobile: 1rem; --gutter-tablet: 2.5rem; --gutter-desktop: 3rem; --grid-columns: 12; --grid-gap: 1.5rem; --measure: 68ch; --tap-target: 2.75rem; --canvas-post: 1080px; --canvas-post-tall: 1350px; --canvas-story: 1920px; --safe-inset: 6%; --safe-top-story: 14%; --safe-bottom-story: 20%; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; --opacity-scrim: 0.72; --opacity-muted: 0.64; --stroke-hairline: 1px; --stroke-control: 2px; --stroke-icon: 2px; /* Dark theme (default) */ --surface-base: #0b0b0b; --surface-raised: #161616; --surface-sunken: #000000; --surface-inverse: #ffffff; --surface-brand: #9b0c02; --surface-brand-deep: #6a0701; --surface-brand-subtle: #3d0400; --surface-disabled: #221f1e; --ink: #ffffff; --ink-muted: #c9c2c0; --ink-disabled: #8c8583; --ink-accent: #e05244; --ink-inverse: #0b0b0b; --on-brand: #ffffff; --on-brand-muted: #f4cdc9; --border-hairline: #2f2b2a; --border-control: #8c8583; --border-strong: #c9c2c0; --border-brand: #e05244; --interactive-primary: #9b0c02; --interactive-primary-hover: #6a0701; --interactive-primary-active: #3d0400; --interactive-inverse: #ffffff; --interactive-inverse-hover: #f4cdc9; --focus-ring: #e05244; --focus-ring-on-brand: #ffffff; --status-success: #3ddc97; --status-success-surface: #0f2019; --status-warning: #f5b638; --status-warning-surface: #231a06; --status-danger: #ff6f61; --status-danger-surface: #280f0c; --status-info: #8ab4ff; --status-info-surface: #101c2e; --shadow-card: 0 18px 40px #00000073; --shadow-overlay: 0 32px 64px #00000099; } [data-theme="light"] { --surface-base: #ffffff; --surface-raised: #faf9f8; --surface-sunken: #f4f2f1; --surface-inverse: #000000; --surface-brand: #9b0c02; --surface-brand-deep: #6a0701; --surface-brand-subtle: #fdecea; --surface-disabled: #f4f2f1; --ink: #0b0b0b; --ink-muted: #565150; --ink-disabled: #767070; --ink-accent: #9b0c02; --ink-inverse: #ffffff; --on-brand: #ffffff; --on-brand-muted: #f4cdc9; --border-hairline: #ddd8d7; --border-control: #767070; --border-strong: #565150; --border-brand: #9b0c02; --interactive-primary: #9b0c02; --interactive-primary-hover: #6a0701; --interactive-primary-active: #3d0400; --interactive-inverse: #ffffff; --interactive-inverse-hover: #f4cdc9; --focus-ring: #9b0c02; --focus-ring-on-brand: #ffffff; --status-success: #0f6b4f; --status-success-surface: #e6f4ee; --status-warning: #7a5200; --status-warning-surface: #fdf1d8; --status-danger: #b3261e; --status-danger-surface: #fcebe9; --status-info: #1d4ed8; --status-info-surface: #e8f0fe; --shadow-card: 0 12px 28px #1f19171f; --shadow-overlay: 0 24px 48px #1f191733; }