/* Figma se65m1YZML316a2EBlKlzZ, PC 1082:15425 / SP 1057:13496.
   Primitive values -> semantic tokens -> responsive typography.
   Geometry specific to an exported composition stays in style.css. */
:root {
  --color-brand-navy: #1d232b;
  --color-brand-navy-400: #7e848d;
  --color-brand-navy-500: #636a74;
  --color-brand-navy-600: #4a515b;
  --color-brand-gold: #af905f;
  --color-brand-gold-100: #e8dbc7;
  --color-brand-gold-600: #705934;
  --color-surface-gold: #f2eee8;
  --color-surface-navy: #dddedf;
  --color-white: #fff;
  --color-black: #000;
  --color-slate-200: #e2e8f0;
  --color-red-700: #b42318;
  --color-gold-alpha-15: rgb(175 144 95 / 15%);
  --color-navy-alpha-10: rgb(29 35 43 / 10%);
  --color-black-alpha-10: rgb(0 0 0 / 10%);
  --color-black-alpha-05: rgb(0 0 0 / 5%);
  --color-white-alpha-20: rgb(255 255 255 / 20%);

  --color-background: var(--color-white);
  --color-foreground: var(--color-brand-navy);
  --color-primary: var(--color-brand-gold);
  --color-primary-foreground: var(--color-white);
  --color-secondary: var(--color-brand-navy);
  --color-accent: var(--color-gold-alpha-15);
  --color-accent-foreground: var(--color-brand-gold-600);
  --color-card: var(--color-white);
  --color-border: var(--color-slate-200);
  --color-muted-foreground: var(--color-brand-navy-500);
  /* Figma 2. Theme/colors/muted-gold and muted-navy: opaque reading surfaces. */
  --color-muted-gold: var(--color-surface-gold);
  --color-muted-navy: var(--color-surface-navy);
  --color-menu-border: var(--color-brand-gold-100);
  --color-placeholder: var(--color-brand-navy-400);
  --color-ink: var(--color-foreground);
  --color-hero-art: var(--color-black);
  --color-error: var(--color-red-700);

  --font-ja:
    "dnp-shuei-gothic-gin-std", "FOT-DNP ShueiGoGinStd", "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN", sans-serif;
  --font-ja-heading:
    "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Inter", sans-serif;
  --font-en-serif: "Instrument Serif", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xxs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.25rem;
  --text-6xl: 3.5rem;
  --lh-none: 1;
  --lh-heading: 1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.75;
  --lh-relaxed: 2;
  --lh-about: 2.2;
  --lh-section: 1.2;
  --fs-section: var(--text-6xl);
  --fs-section-ja: 1.0625rem;
  --fs-about-heading: var(--text-5xl);
  --fs-about-body: 1.25rem;
  --fs-service-title: var(--text-4xl);
  --fs-service-lead: var(--text-xl);
  --fs-heading-h4: 1.25rem;
  --fs-hero-tagline: var(--text-2xl);
  --fs-flow-title: var(--text-xl);
  --fs-flow-number: var(--text-4xl);
  --fs-marquee: 10rem;
  --fs-footer-copy: clamp(var(--text-lg), 1.667vw, var(--text-2xl));

  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;
  --space-section: var(--space-40);
  --container-max: 1280px;
  --container-pad: var(--space-6);
  --header-h: var(--space-20);
  --border-thin: 1px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-button: 8px;
  --radius-panel: 16px;
  --radius-full: 9999px;
  --shadow-button:
    0 1px 3px var(--color-black-alpha-10),
    0 1px 2px -1px var(--color-black-alpha-10);
  --shadow-input: 0 1px 2px var(--color-black-alpha-05);
  --shadow-header: 0 8px 16px -3px var(--color-navy-alpha-10);
  --opacity-motif: 0.2;
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout-hard: cubic-bezier(0.83, 0, 0.17, 1);
  --duration-reveal: 0.9s;
}

@media (max-width: 767px) {
  :root {
    --header-h: var(--space-12);
    --space-section: var(--space-12);
    --fs-section: var(--text-5xl);
    --fs-section-ja: var(--text-base);
    --fs-about-heading: var(--text-2xl);
    --fs-about-body: var(--text-sm);
    --fs-service-title: var(--text-3xl);
    --fs-service-lead: var(--text-base);
    --fs-heading-h4: var(--text-lg);
    --fs-hero-tagline: var(--text-base);
    --fs-flow-number: var(--text-xl);
    --fs-marquee: var(--text-6xl);
    --fs-footer-copy: var(--text-xs);
    --lh-about: var(--lh-relaxed);
  }
}