/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · macrostructure: Workbench · H2 hero knobs: ratio=7/5, media=live-HTML-product-mock, divider=negative-space
 * enrichment: E4 Mock App UI · frame=minimal-hairline, crop=content-first, mock-count=2
 * nav: N1b SaaS three-section · footer: Ft5 Statement · CTA: inline conversion bar
 * theme: custom · vibe: "precise calm, human-controlled knowledge" · paper: oklch(99.2% 0.004 260) · accent: oklch(56.534% 0.23966 260.682)
 * display: Gen Interface JP Display · body: Gen Interface JP · axes: light / geometric-sans / cool
 * studied: no · context: user-provided brand system · v0.8.0
 * contrast: pass (40–41) · nav: N1b · footer: Ft5 · slop: pass (42–45)
 * honest: pass (46) · chrome: user-directed exception (47: image/iframe禁止・OS UI再現指定) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57)
 * motion: user-directed scroll-parallax exception · reduced-motion: pass
 */

:root {
  color-scheme: light;

  --color-paper: oklch(99.2% 0.004 260);
  --color-paper-2: oklch(97.1% 0.005 260);
  --color-paper-3: oklch(94.5% 0.006 260);
  --color-ink: oklch(20.463% 0.008 260);
  --color-ink-2: oklch(48.55% 0.008 260);
  --color-muted: oklch(54.517% 0.008 260);
  --color-rule: oklch(92.191% 0.006 260);
  --color-rule-strong: oklch(68.622% 0.008 260);
  --color-accent: oklch(56.534% 0.23966 260.682);
  --color-accent-hover: oklch(52.075% 0.22298 260.85);
  --color-accent-active: oklch(47.338% 0.20347 260.912);
  --color-accent-soft: oklch(95.5% 0.028 260);
  --color-accent-ink: oklch(99.2% 0.004 260);
  --color-secondary: oklch(55.41% 0.1 218.691);
  --color-danger: oklch(55.213% 0.18987 14.151);
  --color-focus: oklch(62% 0.22 260);
  --color-focus-soft: oklch(90% 0.065 260);
  --color-overlay: oklch(20.463% 0.008 260 / 0.54);
  --color-shadow: oklch(20.463% 0.008 260 / 0.08);
  --color-shadow-soft: oklch(20.463% 0.008 260 / 0.045);

  --font-display: "Gen Interface JP Display", "Gen Interface JP", sans-serif;
  --font-body: "Gen Interface JP", "Yu Gothic UI", sans-serif;

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(2rem, 3vw, 3rem);
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-statement: clamp(2.5rem, 6vw, 5.75rem);

  --leading-tight: 1.04;
  --leading-heading: 1.16;
  --leading-body: 1.65;
  --tracking-tight: -0.035em;
  --tracking-label: 0.1em;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-5xl: 12rem;

  --page-gutter: clamp(1rem, 4vw, 4rem);
  --page-max: 90rem;
  --content-max: 76rem;
  --copy-max: 42rem;
  --copy-narrow: 31rem;

  --radius-compact: 0.5rem;
  --radius-control: 0.75rem;
  --radius-card: 1rem;
  --radius-surface: 1.25rem;
  --radius-overlay: 1.5rem;
  --radius-pill: 999rem;

  --border-hairline: 0.0625rem;
  --border-focus: 0.125rem;

  --shadow-whisper: 0 0.0625rem 0.125rem var(--color-shadow-soft);
  --shadow-surface: 0 1.5rem 4rem var(--color-shadow);

  --control-height: 3rem;
  --control-height-large: 3.5rem;
  --hit-target: 2.75rem;

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-reveal: 500ms;
  --motion-fast: var(--dur-micro);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --hero-shot-height-mobile: 29rem;
  --hero-shot-height-desktop: 36rem;
  --mock-canvas-width-mobile: 50rem;
  --mock-canvas-width-desktop: 100%;
  --mock-desktop-inset: 1.5%;
  --mock-phone-width: clamp(12rem, 19vw, 14.25rem);
  --mock-phone-ratio: 0.5;
  --mock-desktop-font-size: 0.625rem;
  --mock-phone-font-size: 0.625rem;
  --mock-status-icon-gap: 0.1875rem;
  --mock-radius-control: 0.3125rem;
  --mock-radius-card: 0.625rem;
  --mock-radius-surface: 0.75rem;
  --mock-app-bg: oklch(100% 0 0);
  --mock-app-bg-soft: var(--color-paper-2);
  --mock-app-surface-strong: var(--color-paper-3);
  --mock-app-line: var(--color-rule);
  --mock-app-line-strong: var(--color-rule-strong);
  --mock-app-text: var(--color-ink);
  --mock-app-muted: var(--color-ink-2);
  --mock-app-subtle: var(--color-muted);
  --mock-app-primary: var(--color-accent);
  --mock-app-primary-ink: var(--color-accent-ink);
  --mock-app-secondary: var(--color-secondary);
  --mock-app-shadow: 0 1.5rem 4rem var(--color-shadow);
  --mock-phone-shadow: 0 1.75rem 4.5rem var(--color-shadow);
  --reveal-distance: clamp(1.5rem, 4vw, 3.5rem);
  --squircle-smoothing-control: 0.74;
  --squircle-smoothing-content: 0.84;
  --squircle-smoothing-composer: 0.92;
}