/* ===================================================================== Future Markets — Design Tokens (source of truth) 全アセット（design-system / landing-page / pitch-deck）はこの1ファイルを 相対パスで して参照する。色・フォント・サイズをアセット側で再定義しない。 ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap'); :root { /* --------------------------------------------------------------- BRAND COLORS — ロゴ由来（緑=自然/電力, シアン=テック/発光, チャコール=インク） --------------------------------------------------------------- */ --color-green-bright: #6FC03A; --color-green: #4E9E28; /* brand identity green (logo, decorative fills) */ --color-green-ui: #38801B; /* interactive fill — AA safe: white text 4.9:1 */ --color-green-deep: #2B6F03; --color-cyan-bright: #45E5FF; /* glow / energy spark */ --color-cyan: #12C0E6; /* accent — CTA, highlight, data */ --color-cyan-deep: #0E5C86; /* tech surface / grid */ /* Neutral (cool charcoal, ロゴのワードマーク #32393F を基準に階調化) */ --color-ink-900: #0E1519; /* darkest — dark-mode base */ --color-ink-800: #16202A; --color-ink-700: #232E38; --color-ink-600: #32393F; /* wordmark charcoal */ --color-ink-500: #5B6670; /* secondary text */ --color-ink-400: #8A949E; /* muted text */ --color-ink-300: #C2C9CF; /* strong border */ --color-ink-200: #E2E6E9; /* border */ --color-ink-100: #F1F3F5; /* surface tint */ --color-ink-50: #F7F9FA; /* off-white surface */ --color-white: #FFFFFF; /* Status */ --color-success: #35A650; --color-warning: #E0A020; --color-danger: #D8443C; /* --------------------------------------------------------------- SEMANTIC (light theme = default. 参照サイト同様、白ボディ+チャコール文字) --------------------------------------------------------------- */ --bg: var(--color-white); --bg-subtle: var(--color-ink-50); --bg-muted: var(--color-ink-100); --surface: var(--color-white); --text: #1B242B; --text-muted: var(--color-ink-500); --text-faint: var(--color-ink-400); --border: var(--color-ink-200); --border-strong: var(--color-ink-300); --primary: var(--color-green-ui); /* AA-safe interactive green */ --primary-deep: var(--color-green-deep); --accent: var(--color-cyan); /* データ/ラベル専用。塗りボタンには使わない */ --accent-deep: var(--color-cyan-deep); /* シアンを白地に「文字」で置くときは必ずこれ */ --focus-ring: color-mix(in srgb, var(--color-cyan) 55%, transparent); /* Dark section tokens (hero / footer 等「大胆・未来的」面で使う) */ --dark-bg: var(--color-ink-900); --dark-surface: var(--color-ink-800); --dark-border: color-mix(in srgb, var(--color-cyan) 18%, transparent); --dark-text: #EAF0F2; --dark-text-muted: #9BA8B2; /* --------------------------------------------------------------- SIGNATURE — 緑→シアンのヘアライン（1px・限定使用）だけが装飾。 グラデ塗り・グラデ文字・発光(glow)は使わない。 --------------------------------------------------------------- */ --gradient-line: linear-gradient(90deg, var(--color-green) 0%, var(--color-cyan) 100%); --gradient-ink: linear-gradient(160deg, var(--color-ink-800) 0%, var(--color-ink-900) 100%); /* --------------------------------------------------------------- DATA VIZ — チャートは必ずこの順で使う。図表ごとに色を発明しない。 --------------------------------------------------------------- */ --chart-1: #38801B; /* green — 主系列 */ --chart-2: #12C0E6; /* cyan — 対系列 */ --chart-3: #0E5C86; /* deep blue */ --chart-4: #C8891E; /* amber — 対比（on-white 可読） */ --chart-5: #5B6670; /* slate — その他/中立 */ --chart-grid: var(--color-ink-200); --chart-axis: var(--color-ink-400); /* Table */ --table-head-bg: var(--color-ink-50); --table-stripe: color-mix(in srgb, var(--color-ink-100) 55%, transparent); --table-border: var(--border); /* --------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------- */ --font-display: 'Archivo', 'Noto Sans JP', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: clamp(2rem, 1.4rem + 2.6vw, 2.75rem); --text-4xl: clamp(2.5rem, 1.6rem + 3.8vw, 4rem); --text-5xl: clamp(3rem, 1.6rem + 6vw, 5.5rem); /* hero display */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 800; /* display 見出し専用 */ --leading-tight: 1.05; /* EN display 見出し */ --leading-snug: 1.18; --leading-normal: 1.6; --leading-jp: 1.4; /* 日本語見出しはこれ以上（1.05は詰まりすぎ） */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.14em; /* uppercase eyebrow / label */ /* --------------------------------------------------------------- SPACING (4px base) --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-12: 6rem; /* 96 */ --space-16: 8rem; /* 128 */ --section-y: clamp(4rem, 8vw, 8rem); /* --------------------------------------------------------------- RADIUS / SHADOW / LAYOUT --------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(16,21,25,0.06), 0 1px 3px rgba(16,21,25,0.08); --shadow-md: 0 4px 12px rgba(16,21,25,0.08), 0 2px 4px rgba(16,21,25,0.06); --shadow-lg: 0 18px 40px rgba(16,21,25,0.12), 0 6px 12px rgba(16,21,25,0.08); --container-max: 1180px; --container-pad: clamp(1rem, 4vw, 2.5rem); /* Breakpoints (参照値。CSS内は @media に直接記述) : sm 640 / md 768 / lg 1024 / xl 1280 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition: 200ms var(--ease-out); }