/* ============================================================
   S-Log Design System — Colours & Type tokens
   Import this file, then use the CSS variables below.
   Fonts: Google Fonts CDN (see note at bottom).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --slog-red:        #E70012;  /* left eye / left arrow — Success, energy */
  --slog-red-ink:    #C1000F;  /* pressed / text-on-light red */
  --slog-blue:       #00A0EA;  /* right eye / right arrow — Support, trust */
  --slog-blue-ink:   #0086C6;  /* pressed / text-on-light blue */

  /* ---------- CREAM (the "青春" warm ground) ---------- */
  --cream-50:  #FBF9F5;
  --cream-100: #F4F0E8;
  --cream-200: #E7DFD3;   /* SIGNATURE cream — logo field, warm sections */
  --cream-300: #D8CFBE;
  --cream-400: #C4B8A2;

  /* ---------- SLATE (ink + the one dark surface) ---------- */
  --slate-900: #28323F;   /* deepest */
  --slate-800: #334054;   /* SIGNATURE slate — text, hero panel, footer */
  --slate-700: #43526A;
  --slate-600: #5A6B82;
  --slate-500: #7C8AA0;
  --slate-400: #A6B0C0;

  /* ---------- COOL NEUTRALS ---------- */
  --white:     #FFFFFF;
  --cool-50:   #F6F8FA;
  --cool-100:  #ECF0F3;   /* secondary neutral surface (from deck) */
  --cool-200:  #DCE2E8;
  --cool-300:  #C3CcD6;

  /* ---------- SEMANTIC: surfaces ---------- */
  --bg:           var(--white);
  --bg-warm:      var(--cream-200);
  --bg-warm-soft: var(--cream-100);
  --bg-cool:      var(--cool-100);
  --bg-dark:      var(--slate-800);
  --surface-card: var(--white);

  /* ---------- SEMANTIC: text ---------- */
  --fg1:        var(--slate-800);   /* primary ink */
  --fg2:        var(--slate-600);   /* secondary */
  --fg3:        var(--slate-500);   /* muted / captions */
  --fg-on-dark: var(--white);
  --fg-on-dark-muted: rgba(255,255,255,.66);
  --fg-on-warm: var(--slate-800);

  /* ---------- SEMANTIC: lines & accents ---------- */
  --hairline:        rgba(51,64,84,.22);  /* the signature frame rule on light */
  --hairline-strong: rgba(51,64,84,.40);
  --hairline-on-dark: rgba(255,255,255,.28);
  --accent-red:  var(--slog-red);
  --accent-blue: var(--slog-blue);

  /* ---------- RADIUS ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOW / ELEVATION (soft, minimal) ---------- */
  --shadow-sm: 0 2px 8px rgba(51,64,84,.06);
  --shadow-md: 0 8px 24px rgba(51,64,84,.08);
  --shadow-lg: 0 16px 48px rgba(51,64,84,.12);

  /* ---------- SPACING (8px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur: 480ms;

  /* ---------- TYPE families ---------- */
  /* Display is a clean, confident gothic — NOT a rounded face. The rounded
     S-Log wordmark stays an image asset; type never imitates maru-moji. */
  --font-display: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  --font-sans:    'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, monospace;
}

/* ============================================================
   TYPE SCALE  — apply these classes or copy the rules.
   English labels: tracked caps. Japanese: natural tracking.
   ============================================================ */

.slog-eyebrow {            /* "About us", "COMPANY PROFILE" */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg3);
}

.slog-display {            /* hero / wordmark feel */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--fg1);
}

.slog-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  color: var(--fg1);
}

.slog-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--fg1);
}

.slog-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--fg1);
}

.slog-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;     /* generous — Japanese reads better airy */
  color: var(--fg2);
}

.slog-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg3);
}

.slog-num {                /* "01."  "2025"  big tracked figures */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  font-feature-settings: 'tnum' 1;
  color: var(--fg1);
}

/* ============================================================
   FONT NOTE
   Zen Kaku Gothic New (display) and Noto Sans JP (text) are
   loaded from Google Fonts CDN above. Per client direction the
   brand type is a clean gothic — NO rounded (丸文字) typeface.
   Full Japanese webfont files (multi‑MB) are NOT bundled
   locally for size reasons; for offline/production self‑host
   subset .woff2 files and replace the @import.
   ============================================================ */