/* =========================================================================== STRATiV Design System — global entry point. トークン類（colors/typography/spacing/effects）を1ファイルに統合し、 @import のウォーターフォール読み込みを解消。 Google Fonts は各HTMLのでとして直接読み込み（tokens/fonts.css は未使用）。 =========================================================================== */ /* ---- tokens/colors.css ---- */ :root { /* ---- Brand core ---- */ --black: #000000; --white: #FFFFFF; --gold: #FCCA1A; /* ---- Gold ramp (accent) ---- */ --gold-100: #FEF3CC; --gold-300: #FDE07A; --gold-500: #FCCA1A; --gold-600: #E6B40A; --gold-700: #B88C00; --gold-800: #8C6A00; /* ---- Ink / neutral ramp ---- */ --ink-1000: #000000; --ink-950: #0A0A0B; --ink-900: #111114; --ink-800: #1B1B1F; --ink-700: #2A2A30; --ink-600: #3D3D45; --ink-500: #5C5C66; --ink-400: #8A8A94; --ink-300: #B4B4BC; --ink-200: #D6D6DB; --ink-150: #E6E6EA; --ink-100: #F1F1F3; --ink-50: #F8F8F9; /* ---- Semantic — text ---- */ --text-primary: var(--ink-950); --text-secondary: var(--ink-500); --text-muted: var(--ink-500); --text-on-dark: var(--white); --text-on-dark-dim: var(--ink-300); --text-accent: var(--gold-800); --text-inverse: var(--white); /* ---- Semantic — surface ---- */ --surface-page: var(--white); --surface-wash: var(--ink-50); --surface-card: var(--white); --surface-dark: var(--ink-950); --surface-dark-card: var(--ink-900); --surface-inverse: var(--black); /* ---- Semantic — border ---- */ --border-subtle: var(--ink-150); --border-default: var(--ink-200); --border-strong: var(--ink-950); --border-on-dark: var(--ink-700); --border-accent: var(--gold-500); /* ---- Semantic — interactive ---- */ --action-primary: var(--gold-500); --action-primary-hover: var(--gold-600); --action-primary-text: var(--black); --action-dark: var(--black); --action-dark-hover: var(--ink-800); --focus-ring: var(--gold-500); /* ---- Status ---- */ --status-success: #1F8A5B; --status-warning: var(--gold-600); --status-danger: #C8442E; --status-info: #2A6FDB; } /* ---- tokens/typography.css ---- */ :root { --font-sans: 'Noto Sans JP', 'Noto Sans', -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --font-display: var(--font-sans); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; --fs-display: clamp(48px, 6.5vw, 96px); --fs-h1: clamp(36px, 4.5vw, 60px); --fs-h2: clamp(28px, 3.2vw, 40px); --fs-h3: 24px; --fs-h4: 20px; --fs-lead: 19px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px; --fs-label: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.8; --ls-display: -0.02em; --ls-heading: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.22em; --text-display-weight: var(--fw-black); --text-heading-weight: var(--fw-bold); --text-body-weight: var(--fw-regular); } /* ---- tokens/spacing.css ---- */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --container-max: 1240px; --container-text: 720px; --gutter: clamp(20px, 5vw, 80px); --section-y: clamp(80px, 12vw, 160px); --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; --radius-card: var(--radius-md); } /* ---- tokens/effects.css ---- */ :root { --shadow-none: none; --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.06); --shadow-sm: 0 2px 8px rgba(10, 10, 11, 0.06); --shadow-md: 0 6px 24px rgba(10, 10, 11, 0.08); --shadow-lg: 0 16px 48px rgba(10, 10, 11, 0.12); --shadow-gold: 0 8px 28px rgba(252, 202, 26, 0.28); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --focus-ring-width: 2px; --focus-ring-offset: 2px; --z-base: 0; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; }