/* ============================================
   ほっぺくん デザイントークン（全ページ共通）
   hoppe-kun-style.css / hoppe-kun-custom.css より先に読み込む
   ============================================ */
:root {
  /* --- Brand: Primary (Orange) --- */
  --hk-primary: #FF6B35;
  --hk-primary-hover: #FF8C42;
  --hk-primary-light: #FFA500;
  --hk-primary-dark: #e85a24;
  --hk-primary-lighter: #FFB84D;

  /* --- Brand: Gradient --- */
  --hk-gradient-start: #FA9D4D;
  --hk-gradient-end: #FF4F6B;
  --hk-gradient-cta: linear-gradient(
    135deg,
    var(--hk-primary) 0%,
    var(--hk-primary-hover) 50%,
    var(--hk-primary-light) 100%
  );
  --hk-gradient-heading: linear-gradient(
    to right,
    var(--hk-gradient-start) 0%,
    var(--hk-gradient-end) 100%
  );
  --hk-gradient-accent-soft: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.1) 0%,
    rgba(255, 165, 0, 0.1) 100%
  );
  --hk-gradient-hero-pattern: linear-gradient(
    118deg,
    rgba(255, 107, 53, 0.09) 0%,
    transparent 48%
  );
  --hk-gradient-hero-pattern-2: linear-gradient(
    208deg,
    rgba(255, 79, 107, 0.07) 0%,
    transparent 42%
  );

  /* --- Text --- */
  --hk-text: #2a2a2a;
  --hk-text-muted: #696969;
  --hk-text-subtle: #5a5a5a;
  --hk-text-on-primary: #ffffff;
  --hk-text-accent: #b24a0f;
  --hk-text-accent-mobile: #a43e0c;

  /* --- Surfaces --- */
  --hk-bg: #ffffff;
  --hk-bg-warm: #f7f4ef;
  --hk-bg-alt: #f7f7f7;
  --hk-bg-dark: #0b0c0e;
  --hk-surface: #ffffff;
  --hk-surface-overlay: rgba(255, 255, 255, 0.92);

  /* --- Borders --- */
  --hk-border: rgba(0, 0, 0, 0.08);
  --hk-border-strong: rgba(0, 0, 0, 0.1);
  --hk-border-primary: rgba(255, 107, 53, 0.18);
  --hk-border-primary-strong: rgba(255, 107, 53, 0.85);

  /* --- Focus / State --- */
  --hk-focus-ring: rgba(255, 107, 53, 0.12);
  --hk-error: #e74c3c;
  --hk-error-dark: #c0392b;
  --hk-error-bg: #fff7f7;
  --hk-error-border: rgba(231, 76, 60, 0.25);
  --hk-error-bg-soft: rgba(231, 76, 60, 0.08);

  /* --- Shadows --- */
  --hk-shadow-sm: 0 8px 25px rgba(0, 0, 0, 0.06);
  --hk-shadow-md: 0 10px 35px rgba(0, 0, 0, 0.08);
  --hk-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --hk-shadow-primary: 0 10px 25px rgba(255, 107, 53, 0.25);
  --hk-shadow-primary-md: 0 12px 30px rgba(255, 107, 53, 0.22);
  --hk-shadow-primary-lg: 0 16px 40px rgba(255, 107, 53, 0.28);
  --hk-shadow-image: 0 32px 64px rgba(0, 0, 0, 0.22);

  /* --- Overlays --- */
  --hk-overlay-dark: rgba(0, 0, 0, 0.55);
  --hk-overlay-contact-top: rgba(0, 0, 0, 0.55);
  --hk-overlay-contact-bottom: rgba(0, 0, 0, 0.25);
  --hk-hero-glow: rgba(255, 140, 66, 0.16);
}