/** * Design tokens — Figma WebDesign--26 (light). * Primitives only; no component selectors. * Build step: 1 */ :root { /* ------------------------------------------------------------------------- Colors (colour swatch — six base tokens only) ------------------------------------------------------------------------- */ --color-amber: #d3381c; --color-ink: #474a4d; --color-green-dark: #005243; --color-yellowtea: #b98c46; --color-green-light: #c1d8ac; --color-bg: #fbfaf5; --color-bg-dark: #0d0015; --color-amber-80: color-mix(in srgb, var(--color-amber) 80%, transparent); --color-amber-60: color-mix(in srgb, var(--color-amber) 60%, transparent); --color-amber-40: color-mix(in srgb, var(--color-amber) 40%, transparent); --color-amber-20: color-mix(in srgb, var(--color-amber) 20%, transparent); --color-ink-80: color-mix(in srgb, var(--color-ink) 80%, transparent); --color-ink-60: color-mix(in srgb, var(--color-ink) 60%, transparent); --color-ink-40: color-mix(in srgb, var(--color-ink) 40%, transparent); --color-ink-20: color-mix(in srgb, var(--color-ink) 20%, transparent); --color-green-dark-80: color-mix(in srgb, var(--color-green-dark) 80%, transparent); --color-green-dark-60: color-mix(in srgb, var(--color-green-dark) 60%, transparent); --color-green-dark-40: color-mix(in srgb, var(--color-green-dark) 40%, transparent); --color-green-dark-20: color-mix(in srgb, var(--color-green-dark) 20%, transparent); --color-yellowtea-80: color-mix(in srgb, var(--color-yellowtea) 80%, transparent); --color-yellowtea-60: color-mix(in srgb, var(--color-yellowtea) 60%, transparent); --color-yellowtea-40: color-mix(in srgb, var(--color-yellowtea) 40%, transparent); --color-yellowtea-20: color-mix(in srgb, var(--color-yellowtea) 20%, transparent); --color-green-light-80: color-mix(in srgb, var(--color-green-light) 80%, transparent); --color-green-light-60: color-mix(in srgb, var(--color-green-light) 60%, transparent); --color-green-light-40: color-mix(in srgb, var(--color-green-light) 40%, transparent); --color-green-light-20: color-mix(in srgb, var(--color-green-light) 20%, transparent); --color-bg-80: color-mix(in srgb, var(--color-bg) 80%, transparent); --color-bg-60: color-mix(in srgb, var(--color-bg) 60%, transparent); --color-bg-40: color-mix(in srgb, var(--color-bg) 40%, transparent); --color-bg-20: color-mix(in srgb, var(--color-bg) 20%, transparent); /* Publication type tags (Figma type-tag, node 2553:36364) */ --tag-fg: var(--color-bg); --tag-default-bg: var(--color-ink); --tag-default-fg: var(--tag-fg); --tag-talk-bg: var(--color-green-dark); --tag-talk-fg: var(--tag-fg); --tag-article-bg: var(--color-green-light); --tag-article-fg: var(--color-ink); --tag-interview-bg: var(--color-yellowtea); --tag-interview-fg: var(--color-bg-dark); /* off-white on yellowtea fails 4.5:1; bg-dark (#0d0015) gives 6.7:1 */ --tag-panel-bg: var(--color-amber); --tag-panel-fg: var(--tag-fg); --tag-workshop-bg: var(--color-ink); --tag-workshop-fg: var(--tag-fg); /* Fixed pill width — sized for longest JA label (ワークショップ) */ --tag-width-ja: 9rem; /* ------------------------------------------------------------------------- Spacing (spacing frame) ------------------------------------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-60: 60px; --space-80: 80px; /* ------------------------------------------------------------------------- Typography tracking ------------------------------------------------------------------------- */ --tracking-display-tight: -1px; --tracking-display-supertight: -2px; --tracking-body: 0.4px; --tracking-label: 1px; --tracking-label-wide: 2px; /* ------------------------------------------------------------------------- Layout / grid (grid frame) ------------------------------------------------------------------------- */ --grid-columns: 12; --grid-max-width: 1320px; --grid-column-width: 88px; --grid-gutter: 24px; --site-margin-inline: 60px; /* Display dates — EN "26TH JAN 2026", JA "2026年12月26日" (.text-meta-label) */ --date-column-width: 9rem; /* About / Work page heroes — Figma 531px text column, widened slightly for copy */ --page-hero-content-max: calc(531px + var(--space-24)); /* Blog single — fixed reading column (tsuredzure-style spot layout) */ --blog-single-content-width: 620px; /* Portfolio landing hero — 65% of .section-work-hero__inner */ --portfolio-hero-content-max: 65%; /* Vertical column dividers and value-item accent bars (home articles, work types, work values). */ --vertical-divider-width: 1px; /* * Home “Recent writing” columns — Figma 1440px artboard. * Between columns: 110px (55px each side of the divider). * Scale: value × min(100vw, 1440px) / 1440 — implemented via clamp + vw cap. */ --articles-artboard-width: 1440; --articles-divider-width: var(--vertical-divider-width); --articles-gutter-inset: clamp(24px, calc(55 / var(--articles-artboard-width) * 100vw), 55px); --articles-column-gap: clamp(48px, calc(110 / var(--articles-artboard-width) * 100vw), 110px); /* ------------------------------------------------------------------------- Breakpoints (reference for responsive.css — not valid in @media) Custom properties cannot be used inside media queries; hardcode px values in responsive.css. Documented tiers: --bp-sm 480px small phones --bp-md 640px large phones --bp-lg 768px tablet portrait --bp-xl 1024px tablet landscape / small laptop ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Font families (@font-face names wired in typography.css) ------------------------------------------------------------------------- */ --font-display-en: "Cormorant Garamond", serif; --font-body-en: "Lato", sans-serif; --font-display-jp: "Shippori Mincho", serif; --font-body-jp: "Noto Sans JP", sans-serif; }