/* ccshan · design tokens
 * Source of truth: Figma I4rsEvaUMo3A7V9qzlwM0s, page「ccshan / Design System」(874:2)
 * Variable collections: ccshan DS / Primitives · Color · Spacing · Radius · Motion
 * Names mirror the variables' WEB code syntax, e.g. color/text/primary → --color-text-primary.
 */

/* ---------- Figma tokens ---------- */
:root{
  /* Primitives */
  --gray-0:#ffffff;
  --gray-50:#f5f5f7;
  --gray-100:#e8e8ed;
  --gray-400:#a1a1a6;
  --gray-600:#5c5c62;
  --gray-900:#1d1d1f;
  --gray-950:#09090a;
  --red-600:#d70015;
  --brown-600:#75604f;

  /* Semantic color */
  --color-bg-default:var(--gray-0);
  --color-bg-subtle:var(--gray-50);
  --color-bg-inverse:var(--gray-950);
  --color-surface-card:var(--gray-0);
  --color-text-primary:var(--gray-900);
  --color-text-secondary:var(--gray-600);
  --color-text-on-inverse:var(--gray-50);
  --color-text-on-inverse-muted:var(--gray-400);
  --color-text-hint:var(--brown-600);
  --color-text-brand:var(--red-600);
  --color-brand-accent:var(--red-600);
  --color-border-default:var(--gray-100);
  --color-action-primary:var(--gray-900);

  /* Spacing (8pt) */
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px;
  --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px; --space-128:128px;

  /* Layout */
  --layout-margin-desktop:180px;
  --layout-margin-wide:80px;
  --layout-margin-tablet:48px;
  --layout-margin-mobile:24px;
  --layout-gutter:24px;
  --layout-content:1080px;
  --layout-content-wide:1280px;
  --layout-measure:720px;

  /* Radius */
  --radius-none:0; --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-full:999px;

  /* Elevation (ccshan/Shadow/*) */
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 20px 48px rgba(0,0,0,.12);

  /* Typography (ccshan/* text styles · Noto Sans SC) — weight size/line-height */
  --font-family-base:"Noto Sans SC","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  --type-display:700 60px/1.25 var(--font-family-base);
  --type-h1:700 48px/1.25 var(--font-family-base);
  --type-h2:700 36px/1.25 var(--font-family-base);
  --type-h3:700 28px/1.35 var(--font-family-base);
  --type-h4:700 22px/1.45 var(--font-family-base);
  --type-eyebrow:700 18px/1.5 var(--font-family-base);
  --type-body-lead:400 22px/1.6 var(--font-family-base);
  --type-body-large:400 18px/1.65 var(--font-family-base);
  --type-body:400 16px/1.65 var(--font-family-base);
  --type-label-link:500 16px/1.65 var(--font-family-base);
  --type-label-strong:700 16px/1.65 var(--font-family-base);
  --type-caption:400 14px/1.6 var(--font-family-base);

  /* Motion (ccshan DS / Motion) */
  --motion-duration-instant:100ms;
  --motion-duration-fast:200ms;
  --motion-duration-base:320ms;
  --motion-duration-slow:500ms;
  --motion-duration-page:450ms;
  --motion-duration-reveal:700ms;
  --motion-stagger-step:80ms;
  --ease-standard:cubic-bezier(.25,.1,.25,1);
  --ease-emphasized:cubic-bezier(.22,1,.36,1);
  /* Springs sampled from the physics (40 steps); use with the paired duration so the curve settles exactly at 100%.
   * spring-gentle: mass 1 · stiffness 300 · damping 32 (ζ .92) — settles in ~390ms
   * spring-snap:   mass 1 · stiffness 400 · damping 40 (ζ 1.0) — settles in ~460ms */
  --ease-spring-gentle:linear(0, .013, .046, .093, .149, .211, .275, .34, .403, .464, .521, .575, .624, .67, .711, .748, .782, .812, .838, .861, .882, .899, .915, .928, .94, .95, .958, .966, .972, .977, .981, .985, .988, .99, .993, .994, .996, .997, .998, .998, 1);
  --ease-spring-snap:linear(0, .023, .079, .153, .236, .32, .402, .479, .55, .614, .67, .72, .763, .8, .832, .86, .883, .902, .919, .933, .944, .954, .962, .969, .974, .979, .983, .986, .988, .99, .992, .994, .995, .996, .997, .997, .998, .998, .998, .999, 1);
  --motion-duration-spring-gentle:390ms;
  --motion-duration-spring-snap:460ms;
}

/* Breakpoints (for reference; CSS custom properties cannot be used in media queries)
 * desktop ≥1200 · tablet 768–1199 · mobile <768
 */

/* ---------- Legacy variables used by current styles (migrated to Figma tokens in P1–P5) ---------- */
:root{
  --bg:#ffffff; --bg-soft:#f5f5f7; --ink:#1f1f1f; --muted:#6e6e6e; --ink2:#1d1d1f;
  --brand-red:#d70015; --orange:#ff6a00; --dark:#09090a; --dark-muted:#adadb2;
  --radius:16px; --max:1080px; --page:1440px;
  --font:"Noto Sans SC","Inter",system-ui,-apple-system,sans-serif;
  --font-en:"Inter","Noto Sans SC",system-ui,sans-serif;
  --ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.25,.1,.25,1);
  --dur:420ms;
  --case-subnav-h:56px;
}