/**
 * Coccole Studio — Style Guide Tokens
 * Source: approved PC/SP design, 2026-09-08
 *
 * Design principles
 * - Pure white canvas
 * - Sans-serif only; do not use Mincho/serif faces
 * - English-first section titles with small Japanese labels
 * - Square, light, spacious UI; decoration is restrained
 */

:root {
  /* Brand palette */
  --cs-color-mint: #5bc9b1;
  --cs-color-coral: #ee8298;
  --cs-color-mint-pale: #99d8c9;
  --cs-color-yellow: #f1e51b;
  --cs-color-teal-dark: #315f5a;

  /* Semantic colors */
  --cs-color-bg: #ffffff;
  --cs-color-surface: #ffffff;
  --cs-color-text: #363936;
  --cs-color-text-muted: #686e69;
  --cs-color-heading: #363936;
  --cs-color-accent: var(--cs-color-mint);
  --cs-color-accent-strong: var(--cs-color-teal-dark);
  --cs-color-border: #e6e8e5;
  --cs-color-focus: var(--cs-color-coral);

  /* Font families — sans-serif only */
  --cs-font-en: Futura, "Futura PT", "Century Gothic", sans-serif;
  --cs-font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --cs-font-sans: var(--cs-font-ja);

  /* Font weights */
  --cs-font-regular: 400;
  --cs-font-medium: 500;
  --cs-font-semibold: 600;
  --cs-font-bold: 700;

  /* Type scale */
  --cs-text-caption: 0.6875rem; /* 11px */
  --cs-text-small: 0.75rem;    /* 12px */
  --cs-text-label: 0.8125rem;  /* 13px */
  --cs-text-body-sm: 0.875rem; /* 14px */
  --cs-text-body: 1rem;        /* 16px */
  --cs-text-lead: 1.125rem;    /* 18px */
  --cs-text-card: 1.5rem;      /* 24px */
  --cs-text-display-sp: 2.375rem; /* 38px */
  --cs-text-display-pc: clamp(2.625rem, 6vw, 4.75rem); /* 42–76px */

  /* Line height */
  --cs-leading-tight: 1;
  --cs-leading-heading: 1.35;
  --cs-leading-body: 1.8;

  /* Letter spacing */
  --cs-tracking-display: -0.035em;
  --cs-tracking-heading: 0.01em;
  --cs-tracking-label: 0.1em;
  --cs-tracking-nav: 0.08em;

  /* 4px spacing scale */
  --cs-space-1: 0.25rem;  /* 4px */
  --cs-space-2: 0.5rem;   /* 8px */
  --cs-space-3: 0.75rem;  /* 12px */
  --cs-space-4: 1rem;     /* 16px */
  --cs-space-5: 1.25rem;  /* 20px */
  --cs-space-6: 1.5rem;   /* 24px */
  --cs-space-8: 2rem;     /* 32px */
  --cs-space-10: 2.5rem;  /* 40px */
  --cs-space-12: 3rem;    /* 48px */
  --cs-space-14: 3.5rem;  /* 56px */
  --cs-space-16: 4rem;    /* 64px */
  --cs-space-18: 4.5rem;  /* 72px */
  --cs-space-24: 6rem;    /* 96px */
  --cs-space-32: 8rem;    /* 128px */
  --cs-section-space: clamp(var(--cs-space-18), 8vw, var(--cs-space-32));

  /* Layout */
  --cs-container-max: 1160px;
  --cs-container-gutter-pc: 40px;
  --cs-container-gutter-sp: 20px;
  --cs-header-height-pc: 80px;
  --cs-header-height-sp: 68px;
  --cs-breakpoint-sp: 767px;

  /* Shape and line */
  --cs-border-width: 1px;
  --cs-radius-none: 0;
  --cs-radius-circle: 999px;

  /* Interaction */
  --cs-touch-min: 44px;
  --cs-button-height: 52px;
  --cs-transition-fast: 180ms ease;

  /* Image ratios */
  --cs-ratio-work: 16 / 10;
  --cs-ratio-video: 16 / 9;
  --cs-ratio-portrait: 4 / 5;
}

/* Optional reference primitives */
.cs-section-title {
  margin: 0;
  color: var(--cs-color-heading);
  font-family: var(--cs-font-en);
  font-size: var(--cs-text-display-pc);
  font-weight: var(--cs-font-semibold);
  line-height: var(--cs-leading-tight);
  letter-spacing: var(--cs-tracking-display);
}

.cs-section-label {
  margin: var(--cs-space-2) 0 0;
  color: var(--cs-color-accent);
  font-family: var(--cs-font-ja);
  font-size: var(--cs-text-label);
  font-weight: var(--cs-font-semibold);
  line-height: 1.7;
  letter-spacing: var(--cs-tracking-label);
}

.cs-body {
  color: var(--cs-color-text);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-body);
  font-weight: var(--cs-font-regular);
  line-height: var(--cs-leading-body);
}

.cs-container {
  width: min(calc(100% - (var(--cs-container-gutter-pc) * 2)), var(--cs-container-max));
  margin-inline: auto;
}

.cs-button {
  min-height: var(--cs-button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-2) var(--cs-space-6);
  border: var(--cs-border-width) solid var(--cs-color-accent);
  border-radius: var(--cs-radius-none);
  background: var(--cs-color-accent);
  color: var(--cs-color-teal-dark);
  font: var(--cs-font-semibold) var(--cs-text-label) / 1 var(--cs-font-sans);
  letter-spacing: var(--cs-tracking-label);
  transition: opacity var(--cs-transition-fast);
}

.cs-button:hover { opacity: 0.82; }
.cs-button:focus-visible { outline: 2px solid var(--cs-color-focus); outline-offset: 3px; }

@media (max-width: 767px) {
  .cs-section-title {
    font-size: var(--cs-text-display-sp);
    letter-spacing: -0.025em;
  }

  .cs-section-label { font-size: var(--cs-text-caption); }

  .cs-container {
    width: min(calc(100% - (var(--cs-container-gutter-sp) * 2)), var(--cs-container-max));
  }
}