/* Tokens · color · typography · spacing · radius · shadow · motion · container * * Two color systems coexist: * * 1. Griplabs Design System (--ds-* prefix) — primary system going forward. * Sourced from design-tokens.json (Tokens Studio export). * License: in-house, commercial OK. * * 2. Tailwind primitives (--blue-*, --gray-*, --red-*, --green-*, --yellow-*) * Kept for legacy CSS and as a utility palette. * License: Tailwind CSS color palette (MIT, commercial OK). * Reference: https://tailwindcss.com/docs/colors * * Typography: Pretendard (SIL OFL, commercial OK) * - https://github.com/orioncactus/pretendard */ :root { /* ============================================================ * 1) Griplabs Design System — primitives * ============================================================ */ /* Primary (brand blue) */ --ds-primary-50: #BFD9FF; --ds-primary-100: #99C2FF; --ds-primary-200: #73ABFF; --ds-primary-300: #4D94FF; --ds-primary-400: #267DFF; --ds-primary-500: #0066FF; --ds-primary-600: #0057D9; --ds-primary-700: #0047B3; --ds-primary-800: #00388C; --ds-primary-900: #002966; /* Neutral (warm beige) — note: no 800 step in source palette */ --ds-neutral-50: #F9F8F5; --ds-neutral-100: #F0EEEA; --ds-neutral-200: #E0DCD6; --ds-neutral-300: #C2BCB2; --ds-neutral-400: #9F9689; --ds-neutral-500: #7A7266; --ds-neutral-600: #5C554D; --ds-neutral-700: #403C35; --ds-neutral-800: #202020; --ds-neutral-900: #1F1C1A; /* Status — light / main / dark */ --ds-success-light: #DDF0E4; --ds-success-main: #277E50; --ds-success-dark: #1A4D33; --ds-warning-light: #FCEAD2; --ds-warning-main: #E89A2A; --ds-warning-dark: #A86200; --ds-error-light: #F9DEDE; --ds-error-main: #D63232; --ds-error-dark: #911E1E; --ds-info-light: #D6EFF7; --ds-info-main: #229BC4; --ds-info-dark: #154F66; --ds-white: #FFFFFF; --ds-black: #000000; /* ============================================================ * 2) Griplabs Design System — semantic (light theme defaults) * Override block lives at :root[data-theme="dark"] below. * ============================================================ */ /* Background */ --ds-bg-base: var(--ds-neutral-50); --ds-bg-surface: var(--ds-white); --ds-bg-elevated: var(--ds-white); --ds-bg-muted: var(--ds-neutral-100); --ds-bg-brand-subtle: var(--ds-primary-50); /* Text */ --ds-text-primary: var(--ds-neutral-900); --ds-text-secondary: var(--ds-neutral-600); --ds-text-tertiary: var(--ds-neutral-400); --ds-text-disabled: var(--ds-neutral-300); --ds-text-brand: var(--ds-primary-500); --ds-text-brand-strong: var(--ds-primary-700); /* Border */ --ds-border-subtle: var(--ds-neutral-200); --ds-border-default: var(--ds-neutral-300); --ds-border-strong: var(--ds-neutral-400); --ds-border-brand: var(--ds-primary-500); /* CTA · primary */ --ds-cta-primary-default: var(--ds-primary-500); --ds-cta-primary-hover: var(--ds-primary-600); --ds-cta-primary-active: var(--ds-primary-700); --ds-cta-primary-disabled: var(--ds-neutral-200); /* ============================================================ * 3) Griplabs Design System — typography * ============================================================ */ --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* Display · 40 / 52 / -2.5% / bold */ --ds-text-display-size: 40px; --ds-text-display-line: 52px; --ds-text-display-track: -0.025em; --ds-text-display-weight: var(--ds-fw-bold); /* Title 1 · 28 / 38 / -2.2% / semibold */ --ds-text-title1-size: 28px; --ds-text-title1-line: 38px; --ds-text-title1-track: -0.022em; --ds-text-title1-weight: var(--ds-fw-semibold); /* Title 2 · 22 / 30 / -1.8% / semibold */ --ds-text-title2-size: 22px; --ds-text-title2-line: 30px; --ds-text-title2-track: -0.018em; --ds-text-title2-weight: var(--ds-fw-semibold); /* Heading · 18 / 26 / -1.2% / semibold */ --ds-text-heading-size: 18px; --ds-text-heading-line: 26px; --ds-text-heading-track: -0.012em; --ds-text-heading-weight: var(--ds-fw-semibold); /* Body Large · 16 / 24 / -0.5% / regular */ --ds-text-body-lg-size: 16px; --ds-text-body-lg-line: 24px; --ds-text-body-lg-track: -0.005em; --ds-text-body-lg-weight: var(--ds-fw-regular); /* Body · 14 / 22 / 0% / regular */ --ds-text-body-size: 14px; --ds-text-body-line: 22px; --ds-text-body-track: 0em; --ds-text-body-weight: var(--ds-fw-regular); /* Label · 13 / 20 / 0.5% / medium */ --ds-text-label-size: 13px; --ds-text-label-line: 20px; --ds-text-label-track: 0.005em; --ds-text-label-weight: var(--ds-fw-medium); /* Caption · 12 / 18 / 1% / regular */ --ds-text-caption-size: 12px; --ds-text-caption-line: 18px; --ds-text-caption-track: 0.01em; --ds-text-caption-weight: var(--ds-fw-regular); /* ============================================================ * 4) Griplabs Design System — shadow (multi-layer drop) * ============================================================ */ --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.06); --ds-shadow-md: 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04); --ds-shadow-lg: 0 10px 15px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.04); /* ============================================================ * 5) Griplabs Design System — spacing (4-pt scale, source keys) * ============================================================ */ --ds-space-0: 0; --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-24: 96px; /* ============================================================ * 6) Griplabs Design System — radius * ============================================================ */ --ds-radius-none: 0; --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-full: 9999px; /* ============================================================ * 7) Tailwind primitives (kept for legacy + utility palette) * ============================================================ */ /* Blue · Tailwind blue */ --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-300: #93C5FD; --blue-400: #60A5FA; --blue-500: #3B82F6; --blue-600: #2563EB; --blue-700: #1D4ED8; --blue-800: #1E40AF; --blue-900: #1E3A8A; /* Gray · Tailwind slate (cool neutral) */ --gray-0: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; --gray-950: #020617; /* Status · Tailwind defaults */ --red-50: #FEF2F2; --red-500: #EF4444; --red-600: #DC2626; --green-50: #F0FDF4; --green-500: #22C55E; --green-600: #16A34A; --yellow-50: #FEFCE8; --yellow-500: #EAB308; --yellow-600: #CA8A04; /* ============================================================ * 8) Legacy semantic — Tailwind-backed (existing usage) * ============================================================ */ /* Foreground */ --fg-primary: var(--gray-900); --fg-secondary: var(--gray-700); --fg-tertiary: var(--gray-500); --fg-quaternary: var(--gray-400); --fg-on-color: var(--gray-0); --fg-brand: var(--blue-500); /* Background */ --bg-base: var(--gray-0); --bg-subtle: var(--gray-50); --bg-muted: var(--gray-100); --bg-emphasis: var(--gray-200); --bg-inverse: var(--gray-900); --bg-brand: var(--blue-500); --bg-brand-subtle: var(--blue-50); /* Border */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-brand: var(--blue-500); /* ============================================================ * 9) Typography — shared (font family · legacy tracking) * ============================================================ */ --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* English serif system · activated under :root[lang="en"]. */ --font-serif-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-serif-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --tracking-tight: -0.02em; --tracking-normal: -0.01em; /* ============================================================ * 10) Spacing — legacy 4-pt scale (kept; superset of --ds-space-*) * ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ============================================================ * 11) Radius — legacy * ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ============================================================ * 12) Shadow — legacy (slate-tinted) * ============================================================ */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06); /* ============================================================ * 13) Motion * ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ============================================================ * 14) Container · breakpoint refs * ============================================================ */ --container-max: 1280px; --container-narrow: 1100px; --container-pad-x: 32px; --bp-tablet: 1024px; --bp-mobile: 694px; } /* =================================================================== * Container padding · responsive * =================================================================== */ @media (max-width: 1024px) { :root { --container-pad-x: 24px; } } @media (max-width: 694px) { :root { --container-pad-x: 20px; } } /* =================================================================== * Dark theme · explicit opt-in via [data-theme="dark"] * * Overrides the Griplabs Design System semantic layer only. * Legacy --bg-*, --fg-*, --border-* (Tailwind-backed) are not flipped here * to avoid breaking existing light-only pages. To go dark for the whole * site, set and migrate consumers to --ds-*. * =================================================================== */ :root[data-theme="dark"] { /* Background */ --ds-bg-base: var(--ds-black); --ds-bg-surface: var(--ds-neutral-800); --ds-bg-elevated: var(--ds-neutral-600); --ds-bg-muted: rgba(255, 255, 255, 0.05); --ds-bg-brand-subtle: rgba(0, 102, 255, 0.15); /* Text */ --ds-text-primary: var(--ds-neutral-50); --ds-text-secondary: var(--ds-neutral-300); --ds-text-tertiary: var(--ds-neutral-500); --ds-text-disabled: var(--ds-neutral-600); --ds-text-brand: var(--ds-primary-300); --ds-text-brand-strong: var(--ds-primary-200); /* Border */ --ds-border-subtle: var(--ds-neutral-800); --ds-border-default: var(--ds-neutral-600); --ds-border-strong: var(--ds-neutral-500); --ds-border-brand: var(--ds-primary-400); /* CTA · primary (default/hover/active stay branded; disabled darkens) */ --ds-cta-primary-default: var(--ds-primary-500); --ds-cta-primary-hover: var(--ds-primary-600); --ds-cta-primary-active: var(--ds-primary-700); --ds-cta-primary-disabled: var(--ds-neutral-800); } /* OS-level dark preference · applies when no explicit data-theme set. * Authors can pin light by setting data-theme="light" on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-bg-base: var(--ds-black); --ds-bg-surface: var(--ds-neutral-800); --ds-bg-elevated: var(--ds-neutral-600); --ds-bg-muted: rgba(255, 255, 255, 0.05); --ds-bg-brand-subtle: rgba(0, 102, 255, 0.15); --ds-text-primary: var(--ds-neutral-50); --ds-text-secondary: var(--ds-neutral-300); --ds-text-tertiary: var(--ds-neutral-500); --ds-text-disabled: var(--ds-neutral-600); --ds-text-brand: var(--ds-primary-300); --ds-text-brand-strong: var(--ds-primary-200); --ds-border-subtle: var(--ds-neutral-800); --ds-border-default: var(--ds-neutral-600); --ds-border-strong: var(--ds-neutral-500); --ds-border-brand: var(--ds-primary-400); --ds-cta-primary-disabled: var(--ds-neutral-800); } }