/* * SQOOL.NET リデザイン版 ‧ デザイントークン * HANDOFF.md 2-1 (color) / 2-2 (type) / 4-3 (badge color) 準拠 * * テーマ切替は で行う。 * 初期値は light（システム prefers-color-scheme は初回のみ参照、 * 以後は localStorage を優先 — 実装は inc/enqueue.php 内のインラインJS）。 */ /* =========================================================== Light mode (default) =========================================================== */ :root, [data-theme="light"] { /* Surfaces & ink */ --sqool-bg: #f7f9fc; --sqool-surface: #ffffff; --sqool-ink: #1a1a1f; --sqool-muted: #6a6f78; --sqool-line: #e3e7ee; /* Accents */ --sqool-accent: #1eb87a; /* SQOOL エメラルドグリーン */ --sqool-accent-2: #d9781d; /* オレンジアクセント（締切・期限） */ --sqool-warn: #d94a3d; /* 開催中バッジ */ --sqool-success: #1eb87a; /* 応募受付中バッジ */ /* Showcase status (HANDOFF 4-3) */ --sqool-status-applying: #1eb87a; --sqool-status-live: #d94a3d; --sqool-status-upcoming: #6a6f78; --sqool-status-ended: #9aa0aa; /* Soft tints for lead/info blocks */ --sqool-lead-bg: #e8f7f0; /* 緑系の薄いミント（記事リード） */ --sqool-ticker-bg: #eef1f6; /* ニュートラルグレー（速報ティッカー） */ /* Typography (HANDOFF 2-2) */ --sqool-font-body: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --sqool-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sqool-font-head: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; /* Layout tokens */ --sqool-header-h: 56px; /* PC ヘッダー高さ */ --sqool-mobile-nav-h: 52px; /* SP 下部固定ナビ高さ */ --sqool-content-max: 1200px; --sqool-main-col: 760px; --sqool-side-col: 300px; --sqool-radius-sm: 4px; --sqool-radius-md: 8px; --sqool-radius-lg: 12px; /* Elevation */ --sqool-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --sqool-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06); --sqool-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); /* Motion */ --sqool-ease: cubic-bezier(0.4, 0, 0.2, 1); --sqool-dur-fast: 120ms; --sqool-dur-base: 200ms; } /* =========================================================== Dark mode =========================================================== */ [data-theme="dark"] { --sqool-bg: #0a0c10; --sqool-surface: #15181d; --sqool-ink: #e8e8ed; --sqool-muted: #9aa0aa; --sqool-line: #23272e; /* Accent / status カラーは Light と同値（HANDOFF 2-1 末尾の指示） */ /* ダーク用の薄背景（リード / ティッカー） */ --sqool-lead-bg: #1a1d23; --sqool-ticker-bg: #1a1d23; /* Elevation はダークでは黒影を強める */ --sqool-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sqool-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --sqool-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* =========================================================== prefers-reduced-motion =========================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sqool-dur-fast: 0ms; --sqool-dur-base: 0ms; } }