/* ============================================================================ M2AI · AURORA — Design Tokens (single source of truth) "Meets AI :) Be Happy" — 知性のシアンと、人間味のウォームが、深い闇の上で滲み合う。 Hand-written. No build step. Sakura-ready. Relative paths only. Load order on every page: tokens.css → base.css → (page css) THEMES :root / [data-theme="dark"] → immersive night canvas (hero / index / service) [data-theme="light"] → paper & ink (dense factual pages: company / contact) Set the theme with or . Default (no attribute) = dark. GOVERNANCE — cyan as text: Decoration-cyan (--aurora-cyan #5ef0e6) is for GLOW / STROKE / GRADIENTS only. When cyan must carry TEXT, use the dedicated AA-safe ink token: dark → --accent-ink (#5ef0e6 already 14.47:1 on #04070f — safe) light → --accent-ink (#0c5762 — 6.3:1 on paper — safe) Never paint body text with a raw decoration color. (Ma's contrast rule.) ========================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- Night canvas (deep blue → black; the original #003F5C, deepened) ---- */ --ink-900: #04070f; /* near-black — page base */ --ink-800: #070d1c; /* hero base */ --ink-700: #0a1530; /* panel base */ --ink-600: #0e2348; /* lifted surface */ --ink-edge: #16305c; /* hairline / border */ /* ---- Aurora spectrum (cool intelligence → warm humanity) ---- Gradient law: ALWAYS flow cyan → amber/peach. Never reverse. */ --aurora-cyan: #5ef0e6; /* :) cool — intelligence, clarity */ --aurora-teal: #27c4c0; /* relay */ --aurora-blue: #2f7be0; /* depth */ --aurora-violet: #7b6bf0; /* night depth */ --aurora-amber: #ffce8a; /* :) warmth */ --aurora-peach: #ff9d7e; /* the smile */ --aurora-rose: #ff7aa8; /* the afterglow */ /* ---- Brand-facing semantic accents ---- */ --accent: var(--aurora-cyan); /* default decorative accent */ --accent-warm: var(--aurora-peach); /* warm decorative accent */ --accent-ink: #5ef0e6; /* cyan AS TEXT — AA-safe (14.47:1) */ --accent-ink-warm: #ffb38f; /* peach/amber AS TEXT — AA-safe */ --brand-2: var(--aurora-cyan); /* the "2" in M2AI */ /* ---- Text (measured on --ink-900) ---- */ --text-hi: #f3f7ff; /* 18.76:1 AAA */ --text-mid: rgba(228,236,255,0.74); /* 9.29:1 AAA (composited) */ --text-lo: rgba(202,214,244,0.62); /* 5.62:1 AA (composited) */ --text-faint: rgba(180,196,232,0.40); /* decorative only — never body copy */ --text-onaccent: #04121a; /* ink on bright gradients (13:1) */ /* ---- Glass (glassmorphism layers) ---- */ --glass-bg: rgba(20,38,74,0.30); --glass-bg-2: linear-gradient(155deg, rgba(28,48,92,0.40), rgba(10,20,42,0.30)); --glass-bd: rgba(150,190,255,0.16); /* highlight border */ --glass-hi: rgba(255,255,255,0.10); /* inset top highlight */ --glass-blur: 22px; --glass-sat: 130%; /* ---- Surfaces / lines used by components ---- */ --surface: var(--ink-700); --surface-2: var(--ink-600); --hairline: var(--glass-bd); --rule: rgba(150,190,255,0.10); /* faint 版面 gutter rule */ /* ---- Editorial watermark (giant 明朝 kanji bleeding off-edge) ---- */ --watermark: rgba(150,190,255,0.045); /* ---- Selection / scrollbar ---- */ --selection-bg: rgba(94,240,230,0.28); --selection-fg: #ffffff; /* ---- Shadows (cool, deep — they sit on a dark stage) ---- */ --shadow-1: 0 2px 10px rgba(2,6,18,0.40); --shadow-2: 0 18px 50px rgba(2,6,18,0.50); --shadow-3: 0 30px 80px rgba(2,6,18,0.55); --glow-cyan: 0 0 26px rgba(94,240,230,0.22); --glow-violet:0 0 30px rgba(123,107,240,0.22); --glow-warm: 0 0 34px rgba(255,157,126,0.26); /* ---- Buttons ---- */ --btn-grad: linear-gradient(96deg, var(--aurora-cyan), var(--aurora-amber)); --btn-fg: var(--text-onaccent); --btn-shadow: 0 8px 40px rgba(94,240,230,0.28); --btn-shadow-hover: 0 14px 54px rgba(94,240,230,0.42); /* ---- Canvas tints handed to motion.js (so JS reads from CSS, not literals) ---- */ --flow-fade: rgba(5,8,16,0.085); /* per-frame trail fade */ --flow-opacity: 0.92; } /* ============================================================================ LIGHT THEME — paper & ink. For dense, factual, trust-first pages. Borrows Ma's #FBFBF9 / #0E2A33 register + a single, AA-safe cyan. No dark-only assumptions leak in: every dark token above is re-stated here. ========================================================================== */ [data-theme="light"] { color-scheme: light; --ink-900: #fbfbf9; /* paper — page base */ --ink-800: #f5f6f2; /* hero base */ --ink-700: #ffffff; /* panel base (card) */ --ink-600: #ffffff; /* lifted surface */ --ink-edge: #e4e7e0; /* hairline / border */ /* Spectrum stays identical (decoration only) so brand light is consistent. */ --aurora-cyan: #27c4c0; /* slightly deeper on paper for glow legibility */ --aurora-teal: #27c4c0; --aurora-blue: #2f7be0; --aurora-violet: #7b6bf0; --aurora-amber: #f3a96a; --aurora-peach: #ee7f63; --aurora-rose: #e85f8a; --accent: var(--aurora-cyan); --accent-warm: var(--aurora-peach); --accent-ink: #0c5762; /* cyan AS TEXT on paper — 6.3:1 AA */ --accent-ink-warm:#b4502f; /* warm AS TEXT on paper — AA */ --brand-2: #0c5762; /* Gradient-text ink stops for .grad ON PAPER. The decorative spectrum above drops far below 3:1 on #fbfbf9 (amber 1.9:1 … violet 3.9:1), so a .grad heading's warm half vanishes. These four are deepened siblings that each clear AA large-text (≥4.5:1) on paper while preserving the cyan→warm law, so [data-theme="light"] .grad re-points to them. (Ma's contrast rule.) */ --grad-ink-cyan: #0c5762; /* 6.3:1 — cool end */ --grad-ink-teal: #0c5762; /* hold the cool reading through teal */ --grad-ink-violet: #5b3fd6; /* 5.0:1 — depth */ --grad-ink-peach: #b4502f; /* 4.9:1 — the smile, deepened */ --grad-ink-warm: #a8511c; /* 5.0:1 — warm end (amber, deepened) */ --text-hi: #0e2a33; /* ink — ~13:1 on paper */ --text-mid: #36474d; /* ~7.6:1 */ --text-lo: #5b6b70; /* ~4.8:1 AA */ --text-faint: #97a3a6; /* decorative only */ --text-onaccent: #ffffff; /* used only on deep-ink buttons */ --glass-bg: rgba(255,255,255,0.66); --glass-bg-2: linear-gradient(155deg, rgba(255,255,255,0.86), rgba(248,249,245,0.72)); --glass-bd: rgba(14,42,51,0.10); --glass-hi: rgba(255,255,255,0.80); --glass-blur: 14px; --glass-sat: 120%; --surface: #ffffff; --surface-2: #ffffff; --hairline: var(--ink-edge); --rule: rgba(14,42,51,0.10); --watermark: rgba(14,42,51,0.040); --selection-bg: rgba(39,196,192,0.22); --selection-fg: #0e2a33; --shadow-1: 0 2px 10px rgba(14,42,51,0.06); --shadow-2: 0 18px 50px rgba(14,42,51,0.10); --shadow-3: 0 30px 80px rgba(14,42,51,0.12); --glow-cyan: 0 0 22px rgba(39,196,192,0.20); --glow-violet:0 0 24px rgba(123,107,240,0.18); --glow-warm: 0 0 26px rgba(238,127,99,0.22); /* On paper, btn text is dark ink on the gradient (13:1) — never coral+white. */ --btn-grad: linear-gradient(96deg, var(--aurora-cyan), var(--aurora-amber)); --btn-fg: #0a1b1f; --btn-shadow: 0 8px 30px rgba(39,196,192,0.22); --btn-shadow-hover: 0 12px 40px rgba(39,196,192,0.30); --flow-fade: rgba(251,251,249,0.10); --flow-opacity: 0.5; } /* ============================================================================ SCALE TOKENS — shared by both themes (geometry, not color) ========================================================================== */ :root { /* ---- Type families ---- */ --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-display: "Sora", "Noto Sans JP", system-ui, sans-serif; /* heads + EN labels */ --font-mono: "JetBrains Mono", "Sora", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* telemetry/specimen */ --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; /* giant kanji watermark */ /* ---- Fluid type scale (clamp: min, preferred, max) ---- */ --fs-hero: clamp(48px, 9.2vw, 148px); /* H1 — Sora 300 */ --fs-h2: clamp(34px, 5.2vw, 68px); /* section — Sora 300 */ --fs-h3: clamp(24px, 3.2vw, 38px); --fs-h4: 18px; /* pillar / card head — Sora 500 */ --fs-lead: clamp(15px, 1.7vw, 19px); /* intro — Noto 400 / lh 2 */ --fs-body: clamp(15px, 1.55vw, 17px); /* body — Noto 400 / lh 2.05 */ --fs-small: 14px; --fs-caps: clamp(11px, 0.9vw, 13px); /* eyebrow / caps */ --fs-micro: 11px; /* telemetry / footnote */ /* ---- Line-heights (Japanese body wants air) ---- */ --lh-hero: 1.02; --lh-head: 1.12; --lh-lead: 2.0; --lh-body: 2.05; --lh-ui: 1.7; /* ---- Letter-spacing ---- */ --ls-hero: -0.02em; --ls-head: -0.02em; --ls-caps: 0.30em; /* eyebrows */ --ls-caps-wide: 0.34em; --ls-brand: 0.32em; /* "MEETS AI" reading */ /* ---- Measure (line-length caps; palt-tuned) ---- */ --measure: 60ch; /* long-form body */ --measure-narrow: 44ch;/* leads / asides */ /* ---- Layout ---- */ --maxw: 1240px; --maxw-text: 760px; --gutter: clamp(20px, 5vw, 64px); --nav-h: 74px; --section-y: clamp(100px, 15vh, 180px); /* generous 間 between 章 */ --section-y-lg: clamp(120px, 18vh, 200px); /* ---- Named editorial grid (版面) ---- Use with .canvas-grid: [margin | index | body | rail] + hairline gutters. */ --grid-index: clamp(44px, 6vw, 92px); /* vertical-RL JP index column */ --grid-rail: clamp(0px, 8vw, 132px); /* right rail / collapses on mobile */ /* ---- Radii ---- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; /* ---- Motion: durations ---- */ --dur-1: 0.25s; /* micro (hover) */ --dur-2: 0.4s; /* standard transition */ --dur-3: 0.6s; /* entrance */ --dur-4: 1s; /* reveal */ --dur-5: 1.1s; /* hero line-up */ /* ---- Motion: easings (the two signature curves) ---- */ --ease: cubic-bezier(.2,.7,.2,1); /* 漂い — drift / settle */ --ease-out: cubic-bezier(.16,1,.3,1); /* 立ち上がり — rise / arrival */ /* ---- Motion: long ambient loops ---- */ --loop-hue: 14s; /* Be-Happy gradient hue drift */ --loop-bob: 5.5s; /* :) smile bob */ --loop-drift: 28s; /* ribbon parallax */ --loop-pulse: 2.6s; /* eyebrow dot */ --loop-trace: 1.6s; /* whale hairline draw-on */ /* ---- z-index scale (named; never invent literals in components) ---- */ --z-stage: 0; /* aurora backdrop canvas + ribbons */ --z-cursor: 1; /* cursor-follow glow */ --z-content: 2; /* page content / footer */ --z-nav: 50; /* sticky header */ --z-menu: 60; /* mobile full-screen menu */ --z-skip: 100; /* skip link */ --z-top: 200; /* toasts / future overlays */ } /* prefers-reduced-motion: collapse every loop/duration token to a still frame. Components that read these vars become instantly static without extra rules. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0.001ms; --dur-2: 0.001ms; --dur-3: 0.001ms; --dur-4: 0.001ms; --dur-5: 0.001ms; --loop-hue: 0s; --loop-bob: 0s; --loop-drift: 0s; --loop-pulse: 0s; --loop-trace: 0s; } }