/** * Design Tokens - ECレビュー・アシスト Landing Page * ライトモード・モダンミニマリズム */ :root { /* ======================================== カラーパレット ======================================== */ /* プライマリカラー（紫） */ --color-primary: #7C3AED; --color-primary-light: #A78BFA; --color-primary-dark: #5B21B6; --color-primary-hover: #6D28D9; /* アクセントカラー（オレンジ） */ --color-accent: #F59E0B; --color-accent-light: #FCD34D; --color-accent-dark: #D97706; /* セマンティックカラー */ --color-success: #10B981; --color-success-light: #D1FAE5; --color-danger: #EF4444; --color-danger-light: #FEE2E2; --color-warning: #F59E0B; --color-warning-light: #FEF3C7; --color-info: #3B82F6; --color-info-light: #DBEAFE; /* ニュートラルカラー（Liquid Glass） */ --color-bg: #F0EDE8; --color-bg-secondary: #EBE7E2; --color-bg-tertiary: #E8E4DF; --color-card-bg: rgba(255, 255, 255, 0.72); --color-border: transparent; --color-border-dark: transparent; --color-text-primary: #1A1A1A; --color-text-secondary: #6B7280; --color-text-muted: #9CA3AF; --color-text-disabled: #D1D5DB; /* Liquid Glass トークン */ --lg-glass-L1: rgba(255, 255, 255, 0.72); --lg-glass-L2: rgba(255, 255, 255, 0.65); --lg-blur-L1: 20px; --lg-blur-L2: 30px; --lg-rim-light: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.6), inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.15); --lg-rim-light-strong: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.2); --lg-bg-gradient: linear-gradient(135deg, #F0EDE8 0%, #E8E4DF 30%, #F2EFE9 60%, #EBE7E2 100%); /* シャドウカラー */ --color-shadow-light: rgba(0, 0, 0, 0.05); --color-shadow-medium: rgba(0, 0, 0, 0.1); --color-shadow-dark: rgba(0, 0, 0, 0.15); /* ======================================== タイポグラフィ ======================================== */ /* フォントファミリー */ --font-primary: 'Manrope', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; /* フォントサイズ（remベース） */ --text-6xl: clamp(2.375rem, 6vw, 4.5rem); /* 38px - 72px */ --text-5xl: clamp(1.875rem, 5vw, 3.5rem); /* 30px - 56px */ --text-4xl: clamp(1.75rem, 4vw, 3rem); /* 28px - 48px */ --text-3xl: 2.25rem; /* 36px */ --text-2xl: 1.625rem; /* 26px */ --text-xl: 1.25rem; /* 20px */ --text-lg: 1.125rem; /* 18px */ --text-base: 1rem; /* 16px */ --text-sm: 0.875rem; /* 14px */ --text-xs: 0.8125rem; /* 13px */ --text-2xs: 0.75rem; /* 12px */ --text-3xs: 0.6875rem; /* 11px */ /* 行の高さ */ --leading-tight: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 1.8; /* レタースペーシング */ --tracking-tight: -2px; --tracking-normal: -1px; --tracking-wide: 1px; --tracking-wider: 2px; /* フォントウェイト */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --font-black: 900; /* ======================================== スペーシング（remベース、8pxグリッド） ======================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ /* ======================================== ボーダー半径 ======================================== */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.25rem; /* 20px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 1.75rem; /* 28px */ --radius-4xl: 2rem; /* 32px */ --radius-full: 9999px; /* ======================================== シャドウ ======================================== */ --shadow-xs: 0 1px 2px var(--color-shadow-light); --shadow-sm: 0 1px 3px var(--color-shadow-medium), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px var(--color-shadow-medium), 0 4px 6px var(--color-shadow-light); --shadow-xl: 0 20px 25px var(--color-shadow-medium), 0 10px 10px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px var(--color-shadow-dark); --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-button: 0 1px 3px var(--color-shadow-medium); --shadow-button-hover: 0 4px 12px rgba(124, 58, 237, 0.3); /* ======================================== フォーカス状態 ======================================== */ --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.5); --focus-ring-offset: 2px; --focus-ring-color: rgba(124, 58, 237, 0.5); /* ======================================== ボタンサイズ ======================================== */ --button-height-sm: 44px; --button-height-md: 52px; --button-height-lg: 60px; --button-padding-x-sm: 20px; --button-padding-x-md: 28px; --button-padding-x-lg: 36px; /* ======================================== 入力フィールド状態 ======================================== */ --input-border-default: var(--color-border); --input-border-focus: var(--color-primary); --input-border-error: var(--color-danger); --input-border-success: var(--color-success); --input-bg-default: var(--color-bg); --input-bg-focus: var(--color-bg); --input-bg-error: var(--color-danger-light); --input-bg-disabled: var(--color-bg-tertiary); --input-text-default: var(--color-text-primary); --input-text-placeholder: var(--color-text-muted); --input-text-disabled: var(--color-text-disabled); /* ======================================== トランジション ======================================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.6s ease; /* ======================================== レスポンシブブレークポイント ======================================== */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; }