/* ========================================================================== CSS Custom Properties (Design Tokens) ADVANCE v2 Theme These serve as defaults. PHP-generated inline styles on or wrapper elements can override any of these values per-site. ========================================================================== */ /* * Breakpoints (documented as comments - cannot be used in media queries directly) * --bp-sp: 767px (smartphone max) * --bp-tablet: 1024px (tablet max) * --bp-desktop: 1025px (desktop min) * --bp-wide: 1400px (wide desktop min) * * Usage in media queries: * @media (max-width: 767px) { ... } -- smartphone * @media (max-width: 1024px) { ... } -- tablet and below * @media (min-width: 1025px) { ... } -- desktop * @media (min-width: 1400px) { ... } -- wide desktop */ :root { /* -------------------------------------------------------------------------- Colors -------------------------------------------------------------------------- */ --color-primary: #2563eb; --color-secondary: #475569; --color-accent: #f59e0b; --color-bg: #ffffff; --color-text: #333333; --color-text-light: #666666; --color-border: #e5e7eb; /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ --font-family: 'Noto Sans JP', sans-serif; --font-weight-heading: 700; --font-weight-body: 400; /* -------------------------------------------------------------------------- Section Spacing -------------------------------------------------------------------------- */ --spacing-section-s: clamp(30px, 4vw, 50px); --spacing-section-m: clamp(50px, 6vw, 80px); --spacing-section-l: clamp(70px, 8vw, 120px); --spacing-section-xl: clamp(90px, 10vw, 160px); /* -------------------------------------------------------------------------- Container -------------------------------------------------------------------------- */ --container-width: 1200px; --container-padding: 20px; /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ --btn-radius: 8px; --btn-padding: 0.8em 2em; --btn-font-size: 0.95rem; --btn-primary-bg: var(--color-primary); --btn-primary-text: #ffffff; --btn-secondary-bg: var(--color-secondary); --btn-secondary-text: #ffffff; --btn-outline-border: var(--color-primary); --btn-outline-text: var(--color-primary); --btn-text-color: var(--color-primary); /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ --header-height: 80px; --header-height-sp: 60px; /* -------------------------------------------------------------------------- Transitions -------------------------------------------------------------------------- */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; }