/* ===================================================== I'm Hopping — Design Tokens (v3 / Refined Guideline) 想いと、跳ねる。 ===================================================== */ :root { /* ------------------------------------------------------------ CORE BRAND COLOR ------------------------------------------------------------ */ --color-green: #00E13C; --color-green-pastel: #B8E986; --color-green-light: #E5FBEA; --color-green-accent: #00FF66; /* ------------------------------------------------------------ SUB COLOR (accent / decoration only) ------------------------------------------------------------ */ --color-coral: #F5A99A; --color-pink: #F5C2D5; --color-purple: #C9B8E8; --color-blue-core: #2D7FF9; --color-gray-mist: #C8C8C8; /* ------------------------------------------------------------ TEXT / BASE ------------------------------------------------------------ */ --color-black: #000000; --color-text: #1A1A1A; --color-text-sub: #4D4D4D; --color-white: #FFFFFF; --color-border: #E5E5E5; /* ------------------------------------------------------------ BUTTON ------------------------------------------------------------ */ --color-btn-primary: #1E4FD8; --color-btn-primary-hover: #163ba5; /* ------------------------------------------------------------ SEMANTIC ALIASES (used by components / pages CSS) 既存のクラス名が動くように、新しいトークンへのエイリアスを残す ------------------------------------------------------------ */ --color-bg: var(--color-white); --color-bg-soft: var(--color-green-light); --color-bg-mist: var(--color-green-light); --color-bg-green: var(--color-green); --color-bg-green-soft: var(--color-green-light); --color-bg-blue: var(--color-black); /* 旧ブルー背景 → ブラックに置換 */ --color-bg-black: var(--color-black); --color-bg-lime: var(--color-green-pastel); --color-accent: var(--color-green); --color-accent-strong: var(--color-green); --color-primary: var(--color-btn-primary); /* === Legacy palette aliases === 旧 components.css / pages.css 内で広く使われている変数名を 新しいトークンへマッピング（破綻防止用） */ --color-paper: var(--color-white); --color-paper-2: var(--color-green-light); --color-paper-soft: var(--color-white); --color-lime-50: var(--color-green-light); --color-lime-100: var(--color-green-light); --color-lime-300: var(--color-green-pastel); --color-lime-500: var(--color-green-pastel); --color-lime-600: var(--color-green-pastel); --color-green-200: var(--color-green-light); --color-green-300: var(--color-green-pastel); --color-green-400: var(--color-green); --color-green-500: var(--color-green); --color-green-600: var(--color-green); --color-green-700: var(--color-green); --color-blue-300: var(--color-blue-core); --color-blue-500: var(--color-btn-primary); --color-blue-600: var(--color-btn-primary); --color-blue-700: var(--color-btn-primary-hover); --color-blue-900: var(--color-black); --color-coral-500: var(--color-coral); --color-coral-300: var(--color-coral); --color-ink: var(--color-text); --color-ink-soft: var(--color-text); --color-ink-muted: var(--color-text-sub); --color-line: var(--color-border); --color-line-soft: var(--color-border); --color-line-dark: rgba(255,255,255,0.18); --color-text-muted: var(--color-text-sub); --color-text-faint: var(--color-text-sub); --color-text-on-dark: var(--color-white); --color-text-on-dark-muted: rgba(255,255,255,0.72); --color-text-on-blue: var(--color-white); --color-text-on-green: var(--color-black); --color-primary-900: var(--color-text); --color-primary-700: var(--color-btn-primary); --color-primary-500: var(--color-btn-primary); --color-primary-100: var(--color-green-light); --color-primary-50: var(--color-white); --color-accent-700: var(--color-green); --color-accent-500: var(--color-green); --color-accent-300: var(--color-green-light); --color-accent-50: var(--color-green-light); --color-bg-alt: var(--color-green-light); --color-text-mute: var(--color-text-sub); --color-text-strong: var(--color-text); --color-on-dark: var(--color-white); --color-on-dark-muted: rgba(255,255,255,0.72); --color-on-dark-faint: rgba(255,255,255,0.55); /* ------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------ */ --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", sans-serif; --font-en-serif: "Libre Baskerville", "Noto Serif JP", serif; --font-en-sans: "Inter", "Helvetica Neue", Arial, sans-serif; /* Legacy aliases */ --font-en: var(--font-en-sans); --font-display: var(--font-en-serif); --font-sans: var(--font-jp); --font-base: var(--font-jp); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ------------------------------------------------------------ TYPE SCALE ------------------------------------------------------------ */ --fs-hero-en: 6rem; /* 96px */ --fs-hero-jp: 2.25rem; /* 36px */ --fs-h1: 2.5rem; /* 40px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.25rem; /* 20px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ /* Legacy aliases */ --fs-display: var(--fs-hero-en); --fs-h4: 1.125rem; --fs-lead: 1.0625rem; --fs-body-l: 1.0625rem; --fs-body-s: var(--fs-small); --fs-caption: 0.8125rem; --fs-eyebrow: 0.75rem; /* ------------------------------------------------------------ LINE HEIGHT ------------------------------------------------------------ */ --lh-hero: 1.05; --lh-tight: 1.4; --lh-base: 1.8; /* Legacy aliases */ --lh-display: var(--lh-hero); --lh-heading: var(--lh-tight); --lh-body: var(--lh-base); /* ------------------------------------------------------------ LETTER SPACING ------------------------------------------------------------ */ --tracking-tight: -0.01em; --tracking-snug: 0; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; /* ------------------------------------------------------------ WEIGHT ------------------------------------------------------------ */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 500; --fw-bold: 700; --fw-extra: 700; /* ------------------------------------------------------------ SPACING ------------------------------------------------------------ */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 96px; --space-2xl: 160px; /* Legacy aliases (8pt grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 80px; --space-16: 120px; --space-20: 160px; /* Section padding */ --section-py: var(--space-2xl); --section-py-sm: var(--space-xl); /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --container-max: 1440px; --container-pad: 40px; --container-narrow: 840px; --container-default: 1200px; --container-wide: var(--container-max); --container-px: var(--container-pad); --header-h: 72px; /* ------------------------------------------------------------ RADIUS ------------------------------------------------------------ */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ------------------------------------------------------------ SHADOW — グラデーション・大胆な影は禁止。極めて控えめに。 ------------------------------------------------------------ */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-pop: none; --shadow-soft: none; --shadow-soft-lg: none; --shadow-soft-xl: none; --shadow-green-soft: none; --shadow-green-strong: none; --shadow-blue-soft: none; --shadow-blue-strong: none; --shadow-ink-soft: none; --shadow-ink-strong: none; --shadow-line: 0 0 0 1px var(--color-border); --shadow-press: none; --shadow-press-lg: none; --shadow-glow-accent: none; /* ------------------------------------------------------------ Z-INDEX ------------------------------------------------------------ */ --z-header: 100; --z-drawer: 110; --z-modal: 200; /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-1: 180ms; --dur-2: 240ms; --dur-3: 320ms; --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 300ms; } /* Tablet / Mobile — タイプスケール・コンテナの余白を調整 */ @media (max-width: 1024px) { :root { --fs-hero-en: 3rem; --fs-hero-jp: 1.5rem; --fs-h1: 2rem; --fs-h2: 1.5rem; --container-pad: 20px; --container-px: 20px; --section-py: var(--space-xl); --header-h: 60px; } }