/* ========================================================================== Design Tokens - JNAIJA: Japan x Naija Creator Platform DESIGN.md 準拠 — Light Theme + Cyan/Purple Dual Accent ========================================================================== */ :root { /* --- Brand Colors (装飾・ダークセクション用) --- */ --color-cyan-brand: #00FFFF; --color-purple-brand: #8B5CF6; /* --- Primary: Cyan (UI用 WCAG AA準拠) --- */ --color-cyan: #0891B2; --color-cyan-dark: #0E7490; --color-cyan-darker: #155E75; --color-cyan-light: #22D3EE; --color-cyan-bg: #ECFEFF; --color-cyan-bg-subtle: #F0FDFA; --color-cyan-watermark: rgba(8, 145, 178, 0.12); /* 装飾巨大テキスト用: 見えるが主張しない */ /* --- Secondary: Purple --- */ --color-purple: #7C3AED; --color-purple-dark: #6D28D9; --color-purple-light: #A78BFA; --color-purple-bg: #F5F3FF; /* --- Light Neutrals --- */ --color-bg: #FFFFFF; --color-bg-alt: #F9FAFB; --color-bg-surface: #F3F4F6; --color-bg-hover: #E5E7EB; --color-card: #FFFFFF; /* --- Border --- */ --color-border: #E5E7EB; --color-border-light: #F3F4F6; --color-border-accent: rgba(8, 145, 178, 0.3); /* --- Text --- */ --color-text: #1F2937; /* 白上 14.7:1 */ --color-text-secondary: #4B5563; /* 白上 7.5:1 — 副テキスト */ --color-text-tertiary: #6B7280; /* 白上 4.6:1 — 小ラベル、キャプション (WCAG AA最低ライン) */ --color-text-muted: #9CA3AF; /* 白上 2.7:1 — placeholder専用、本文テキストに使わない */ --color-text-heading: #111827; /* --- Dark Section (ヒーロー・ヘッダー・フッター・CTA) --- */ --color-dark-bg: #0F172A; --color-dark-surface: #1E293B; --color-dark-text: #F1F5F9; --color-dark-muted: #94A3B8; /* --- Semantic --- */ --color-danger: #EF4444; --color-danger-bg: #FEE2E2; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-info: #3B82F6; --color-info-bg: #DBEAFE; --color-success: #10B981; --color-success-bg: #D1FAE5; /* --- Award --- */ --color-award-bronze: #F97316; /* --- Logo --- */ --color-logo-red: #E53E3E; /* --- Typography --- */ --font-display: "Space Grotesk", "Zen Kaku Gothic New", sans-serif; --font-body: "Inter", "Zen Kaku Gothic New", sans-serif; --font-mono: "JetBrains Mono", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-display: 3.5rem; /* --- Spacing --- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* --- Border Radius --- */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* --- Shadow (ライトUI用) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); /* --- Layout --- */ --header-height: 64px; --sidebar-width: 260px; --content-max-width: 1200px; /* --- Transition --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* --- Background Pattern --- */ --bg-pattern-opacity: 0.06; /* ========================================================================== Responsive Tokens — Breakpoint-aware values Breakpoints: Desktop >1023px / Tablet ≤1023px / Mobile ≤768px / Small ≤480px 各コンポーネントは以下のトークンを参照する。リテラル値を直書きしないこと。 ========================================================================== */ /* セクション上下余白 */ --section-padding-y: var(--space-3xl); /* Desktop: 4rem */ --section-padding-y-lg: var(--space-4xl); /* Desktop: 6rem */ /* コンテナ左右余白 (画面端との gutter) */ --container-gutter: var(--space-lg); /* Desktop: 1.5rem */ /* カード内側 padding */ --card-padding: var(--space-lg); /* Desktop: 1.5rem — 標準カード */ --card-padding-sm: var(--space-md); /* Desktop: 1rem — 密なカード */ --card-gap: var(--space-md); /* カード内 flex/grid gap */ /* Avatar サイズ (カード内) */ --avatar-card: 80px; /* 一覧カード用 */ --avatar-featured: 120px; /* Featured カード用 */ /* Hero padding */ --hero-padding-top: var(--space-4xl); --hero-padding-bottom: var(--space-3xl); } /* ========================================================================== Responsive Overrides — Breakpoint毎のトークン値切替 ※ CSS変数自体は @media 直書きできないため、:root 内で上書きする ========================================================================== */ @media screen and (max-width: 1023px) { :root { --section-padding-y: var(--space-2xl); /* 3rem */ --section-padding-y-lg: var(--space-3xl); /* 4rem */ --hero-padding-top: var(--space-3xl); --hero-padding-bottom: var(--space-2xl); } } @media screen and (max-width: 768px) { :root { --section-padding-y: var(--space-xl); /* 2rem */ --section-padding-y-lg: var(--space-2xl); /* 3rem */ --container-gutter: var(--space-md); /* 1rem */ --card-padding: var(--space-md); /* 1rem */ --card-padding-sm: var(--space-sm); /* 0.5rem */ --card-gap: var(--space-sm); --avatar-card: 56px; --avatar-featured: 80px; --hero-padding-top: var(--space-2xl); --hero-padding-bottom: var(--space-xl); } } @media screen and (max-width: 480px) { :root { --container-gutter: var(--space-sm); /* 0.5rem — 端ギリギリまで使う */ --card-padding: var(--space-sm); --avatar-card: 48px; } } /* Bulma overrides */ :root { --bulma-primary-h: 191; --bulma-primary-s: 91%; --bulma-primary-l: 37%; --bulma-link: var(--color-cyan); --bulma-family-primary: var(--font-display); --bulma-radius: var(--radius-md); --bulma-radius-large: var(--radius-lg); --bulma-scheme-main: var(--color-bg); --bulma-scheme-main-bis: var(--color-bg-alt); --bulma-scheme-main-ter: var(--color-bg-surface); --bulma-text: var(--color-text); --bulma-text-strong: var(--color-text-heading); --bulma-border: var(--color-border); }