/* =================================================================== tokens.css — FarmStack 정밀 디자인 토큰 (2026-05-10) -------------------------------------------------------------------- 참조 디자인 (화면 캡처 2026-05-10 172145.png) 의 정밀한 색·간격·그림자. 기존 design-tokens.css 와 호환; 두 파일이 모두 로드되면 본 파일이 우선. ─────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* === Brand colors (정밀 — 참조 이미지의 진한 녹색) === */ --color-primary: #2D7A3E; --color-primary-hover: #246330; --color-primary-light: #E8F5EE; --color-primary-soft: #F0F9F4; --color-primary-dark: #1F5A2E; --color-primary-border: #B7DFC4; --color-secondary: #1565C0; --color-secondary-light: #E3F2FD; /* === Status === */ --color-error: #DC2626; --color-error-bg: #FEE2E2; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-success: #10B981; --color-success-bg: #D1FAE5; --color-info: #3B82F6; --color-info-bg: #DBEAFE; --color-danger: #DC2626; /* === Neutral text & surfaces === */ --color-text: #111827; --color-text-strong: #030712; --color-text-secondary: #6B7280; --color-text-tertiary: #9CA3AF; --color-text-inverse: #FFFFFF; --color-bg-page: #F9FAFB; --color-bg-card: #FFFFFF; --color-bg-subtle: #F3F4F6; --color-bg-muted: #F9FAFB; /* legacy aliases — 기존 design-tokens.css 와 호환 */ --color-background: var(--color-bg-page); --color-card: var(--color-bg-card); --color-surface: var(--color-bg-subtle); /* === Borders === */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-input: #D1D5DB; --color-border-focus: #2D7A3E; /* === Spacing scale (8px base, 4px step) === */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* legacy aliases */ --spacing-xs: var(--space-xs); --spacing-sm: var(--space-sm); --spacing-md: var(--space-md); --spacing-lg: var(--space-lg); --spacing-xl: var(--space-xl); /* === Radius === */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* === Shadows (참조 이미지의 옅은 카드 그림자) === */ --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-card-hover: 0 4px 8px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04); --shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.12); --shadow-focus: 0 0 0 3px rgba(45, 122, 62, 0.18); /* legacy */ --shadow-sm: var(--shadow-card); --shadow-md: var(--shadow-card-hover); --shadow-lg: var(--shadow-pop); /* === Layout === */ --sidebar-width: 240px; --sidebar-collapsed-width: 64px; --header-height: 60px; --content-max-width: 1440px; --container-form: 960px; /* 폼 컨테이너 권장 폭 */ --container-narrow: 720px; --container-content-pad-mobile: 12px; /* 모바일 좌우 마진 */ --container-content-pad-desktop: 24px; /* 데스크톱 좌우 마진 */ /* === Breakpoints (반응형 단일 출처 — media query 안에서는 직접 사용 불가, 코멘트로만 참조) === --bp-sm: 640px mobile→tablet --bp-md: 768px tablet→small-laptop --bp-lg: 1024px laptop --bp-xl: 1280px desktop --bp-2xl: 1536px wide CSS @media 는 var() 미지원이라 숫자 그대로 적는다 (값을 바꿀 일이 거의 없음). JS 에서 동기화가 필요하면 getComputedStyle 로 :root 의 --bp-* 를 읽는다. */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* === Transitions === */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* duration tokens (정밀 — 분석가 H1 권고 통일) */ --t-fast: 150ms; --t-base: 250ms; --t-slow: 350ms; /* === z-index scale (단일 출처) === */ --z-base: 1; --z-sticky: 50; --z-dropdown: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100; /* === Typography scale (정밀 — 디자이너 §3.1) === */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.875rem; /* 30px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.375; --lh-normal: 1.5; --lh-relaxed: 1.625; /* === Form control tokens === */ --form-control-height: 42px; --form-control-padding-x: 14px; --form-control-padding-y: 10px; /* === Card / section tokens === */ --card-padding: var(--space-xl); --card-padding-mobile: var(--space-lg); --section-gap: var(--space-lg); /* === Elevation (별칭) === */ --elevation-0: none; --elevation-1: var(--shadow-card); --elevation-2: var(--shadow-card-hover); --elevation-3: var(--shadow-pop); /* === Font scale (typography.css 가 사용) === */ --font-scale: 1; --base-font-size: calc(16px * var(--font-scale)); } /* === Dark theme override === */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #4ADE80; --color-primary-hover: #22C55E; --color-primary-light: rgba(74, 222, 128, 0.16); --color-primary-soft: rgba(74, 222, 128, 0.08); --color-primary-dark: #15803D; --color-primary-border: rgba(74, 222, 128, 0.40); --color-secondary: #60A5FA; --color-secondary-light: rgba(96, 165, 250, 0.16); --color-error: #F87171; --color-error-bg: rgba(248, 113, 113, 0.16); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.16); --color-success: #34D399; --color-success-bg: rgba(52, 211, 153, 0.16); --color-info: #60A5FA; --color-info-bg: rgba(96, 165, 250, 0.16); --color-danger: #F87171; --color-text: #F3F4F6; --color-text-strong: #FFFFFF; --color-text-secondary: #9CA3AF; --color-text-tertiary: #6B7280; --color-bg-page: #0B1220; --color-bg-card: #111827; --color-bg-subtle: #1F2937; --color-bg-muted: #111827; --color-background: var(--color-bg-page); --color-card: var(--color-bg-card); --color-surface: var(--color-bg-subtle); --color-border: #1F2937; --color-border-strong: #374151; --color-border-input: #374151; --color-border-focus: #4ADE80; --shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.50); --shadow-pop: 0 8px 32px rgba(0,0,0,0.60); --shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.30); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] button { color-scheme: dark; }