/* Papatto — Tone & Manner Token Set: MODERN 파일명 규칙: theme-*.css (톤) / brand-*.css (브랜드 액센트 컬러) — 서로 독립된 두 축. 이 파일은 타이포/도형(border-radius)/뉴트럴 색상만 담당한다. 브랜드컬러는 여기 없음(brand-orange.css 참고). components.css는 이 변수들만 참조하고, 원시값(hex/px)을 직접 쓰지 않습니다. Figma Variables 바인딩 시 변수명 그대로 매핑하면 됩니다 (예: color/modern/primary). 브랜드 서체는 여기서 @import — 이 파일 하나만 교체하면 폰트 리소스까지 같이 바뀐다. index.html 에 폰트 를 따로 안 둬도 되게 하려는 의도. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); .theme-modern { /* ── Color ── */ --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-muted: #f5f5f5; /* Accordion 배경 등 */ --color-text-primary: #141414; --color-text-inverse: #ffffff; --color-text-muted: #8c8c8c; /* Accordion 답변, Quote 저자 직함 등에서 실측된 값으로 보정 (기존 #6b6b6b는 대략값이었음) */ --color-accent: #141414; /* Modern = 채도 낮은 뉴트럴 액센트, 버튼/강조 = 거의 블랙 */ --color-accent-soft: #e8632c; /* Card Detail 캡션용 포인트 컬러 (스크린샷 기준, JSON 플레이스홀더와는 별개) */ --color-border: #e5e5e5; --color-overlay: rgba(0, 0, 0, 0.45); /* Hero 배경 이미지 위 텍스트 가독성용 */ --color-header-bg: rgba(31, 31, 31, 0.4); /* Header 반투명 배경, 블러 위에 얹힘 */ --color-header-text: var(--color-text-inverse); /* Modern은 어두운 헤더라 흰 글씨 */ /* 브랜드 액센트 컬러(--color-brand-accent 등)는 이 파일에 없음 → brand-*.css 참고. 톤(Modern/Kitsch/Friendly)과 브랜드컬러(orange/purple/...)는 서로 다른 축이라 분리했다. "모던+보라색"처럼 자유 조합되려면 톤 파일이 색상값을 갖고 있으면 안 된다. Kitsch 실측 결과, 브랜드 액센트가 위젯마다 다른 색(3슬롯)일 수 있다는 게 확인되어 brand-*.css가 --color-brand-accent-1/2/3 세 개를 공급하고, 이 톤 파일이 "그 3개를 어느 위젯에 배정할지"를 결정한다. Modern은 3개 다 같은 색(orange)이라 아래처럼 전부 accent-1을 참조해도 시각적으로 문제 없다. */ --color-notification-bg: var(--color-brand-accent-1); --color-quote-bg: var(--color-brand-accent-1); --color-quote-text: var(--color-text-primary); --color-quote-author-title: var(--color-text-muted); --color-faq-bg: transparent; --color-cta-button-bg: var(--color-accent); --color-cta-button-text: var(--color-text-inverse); --color-hero-button-bg: var(--color-text-inverse); --color-hero-button-text: var(--color-accent); --border-card-width: 0px; --color-border-card: transparent; --card-inset: 0px; --btn-backdrop-blur: 0px; /* ── Typography ── */ --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-weight-headline: 500; /* Roboto Medium */ --font-weight-body: 400; --line-height: 1.45; /* Kitsch 실측 결과 역할별 굵기 편차가 커서(Headline=Black, Subhead=Light 등) 세분화. Modern은 기존 동작 유지를 위해 전부 기존 값으로 채움. */ --font-weight-headline-hero: var(--font-weight-headline); --font-weight-headline-section: var(--font-weight-headline); --font-weight-title: var(--font-weight-body); /* Card/Accordion Title */ --font-weight-quote: var(--font-weight-headline); --font-weight-button: var(--font-weight-body); /* 폰트 "크기"는 톤 무관 공용 사다리라 themes/type-scale.css로 이동함 (--font-h1, --font-h2, --font-lead, --font-quote, --font-title-*, --font-body, --font-helper, --font-detail 전부 거기서 :root에 정의됨). 이 파일엔 이제 톤별로 실제 다른 값(글꼴/굵기/색상)만 남는다. */ /* ── Icon (Material Symbols variable axes) ── IconCustomizer_v1.0.jsx 기준: shape는 rounded | sharp 2종류만 존재 (outlined 없음). family는 마크업이 아니라 여기서만 결정 — HTML의 아이콘 class는 톤 안 타는 중립 이름(.icon) 사용. */ --icon-family: "Material Symbols Rounded"; --icon-fill: 0; --icon-weight: 200; --icon-grade: 90; --icon-opsz: 24; /* ── Shape ── */ --radius-pill: 999px; /* Button, Icon 버튼 */ --radius-card: 0px; /* Modern = 각진 카드. Kitsch/Friendly 톤에서 값만 교체 */ --radius-image: 0px; /* 이미지 프레임 모서리 — Card 자체 radius와 독립 축(둥근 카드+각진 이미지 조합도 가능해야 함) */ /* ── Spacing scale (0/10/20/40/80/160/320) ── */ --space-10: 10px; --space-20: 20px; --space-40: 40px; --space-80: 80px; --space-160: 160px; --space-320: 320px; /* ── 섹션 좌우 안전 여백 (모바일 프레임 기준 고정값, 스페이싱 스케일과 별도) ── */ --gutter: 14px; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-family); }