/* ============================================================
   おやこんぱす Design System — Design Tokens
   モバイルファースト / SWELL実装を想定
   ============================================================ */

:root {
  /* ---------- Color: Brand ---------- */
  --oc-primary-50:  #EEF6F4;
  --oc-primary-100: #D6EAE5;
  --oc-primary-200: #A8D2C8;
  --oc-primary-300: #6FB3A2;
  --oc-primary-400: #3F9783;
  --oc-primary-500: #1F7A66;
  --oc-primary-600: #176253;
  --oc-primary-700: #114A3F;
  --oc-primary-800: #0C342C;

  /* Accent（CV用）*/
  --oc-accent-50:   #FFF6E8;
  --oc-accent-100:  #FFE4BE;
  --oc-accent-300:  #FFB661;
  --oc-accent-500:  #FF8A1F;
  --oc-accent-600:  #E5710C;
  --oc-accent-700:  #B65706;

  /* Sub（コーラル）*/
  --oc-coral-50:  #FFF3F0;
  --oc-coral-100: #FFE4DE;
  --oc-coral-300: #FF9C8A;
  --oc-coral-500: #F76E5A;
  --oc-coral-600: #DE5440;
  --oc-coral-700: #C84634;

  /* Sky */
  --oc-sky-50:  #EDF6FC;
  --oc-sky-100: #E5F1FA;
  --oc-sky-300: #9DC9EA;
  --oc-sky-500: #4E9ED1;
  --oc-sky-600: #3A84B0;
  --oc-sky-700: #2A6A8A;

  /* Neutral */
  --oc-ink-900: #1F2A2E;
  --oc-ink-700: #46555A;
  --oc-ink-500: #6E7C81;
  --oc-ink-400: #98A2A6;
  --oc-ink-300: #C9D0D2;
  --oc-ink-200: #E4E8E9;
  --oc-ink-100: #F1F4F4;
  --oc-paper:   #FBF8F2;
  --oc-paper-2: #F5F0E5;
  --oc-white:   #FFFFFF;

  /* Semantic */
  --oc-success: #2DA66B;
  --oc-warning: #E5A20C;
  --oc-danger:  #D8463A;
  --oc-info:    var(--oc-sky-500);

  /* ---------- Typography ---------- */
  --oc-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --oc-font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --oc-font-en: "Fraunces", "Zen Kaku Gothic New", serif;
  --oc-font-hand: "Yomogi", "Zen Maru Gothic", cursive;

  /* Type scale */
  --oc-text-xs:   12px;
  --oc-text-sm:   13px;
  --oc-text-base: 15px;
  --oc-text-md:   16px;
  --oc-text-lg:   18px;
  --oc-text-xl:   20px;
  --oc-text-2xl:  24px;
  --oc-text-3xl:  28px;
  --oc-text-4xl:  34px;

  /* Line height */
  --oc-leading-tight: 1.35;
  --oc-leading-normal: 1.7;
  --oc-leading-relaxed: 1.9;

  /* ---------- Spacing ---------- */
  --oc-s-1: 4px;
  --oc-s-2: 8px;
  --oc-s-3: 12px;
  --oc-s-4: 16px;
  --oc-s-5: 20px;
  --oc-s-6: 24px;
  --oc-s-8: 32px;
  --oc-s-10: 40px;
  --oc-s-12: 48px;
  --oc-s-16: 64px;
  --oc-s-20: 80px;

  /* ---------- Radius ---------- */
  --oc-r-sm: 8px;
  --oc-r-md: 12px;
  --oc-r-lg: 18px;
  --oc-r-xl: 24px;
  --oc-r-pill: 999px;

  /* ---------- Shadow ---------- */
  --oc-shadow-1: 0 1px 2px rgba(31,42,46,.06), 0 2px 6px rgba(31,42,46,.04);
  --oc-shadow-2: 0 4px 14px rgba(31,42,46,.08);
  --oc-shadow-3: 0 10px 30px rgba(31,42,46,.10);
  --oc-shadow-cta: 0 6px 18px rgba(255,138,31,.35);

  /* ---------- Z ---------- */
  --oc-z-nav: 50;
  --oc-z-modal: 100;
  --oc-z-toast: 200;

  /* ---------- Container ---------- */
  --oc-mobile-max: 430px;
  --oc-content-max: 720px;

  /* ---------- Mobile bottom nav ---------- */
  --oc-bottom-nav-h: 0px;

  /* ---------- SWELL overrides ---------- */
  --color_main: var(--oc-primary-500);
  --color_text: var(--oc-ink-900);
  --color_bg: var(--oc-paper);
  --swl-fz--root: 15px;
}

/* ---------- Global base overrides ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--oc-font-sans);
  color: var(--oc-ink-900);
  background: var(--oc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oc-font-display);
  font-weight: 700;
  line-height: var(--oc-leading-tight);
  letter-spacing: .01em;
}

/* ---------- Brand utilities ---------- */
.oc-paper-grain {
  background-image:
    radial-gradient(rgba(31,122,102,.04) 1px, transparent 1px),
    radial-gradient(rgba(255,138,31,.03) 1px, transparent 1px);
  background-size: 22px 22px, 38px 38px;
  background-position: 0 0, 11px 19px;
}

.oc-marker {
  background-image: linear-gradient(transparent 60%, rgba(255,182,97,.55) 0);
  padding: 0 .15em;
}

.oc-handwritten {
  font-family: var(--oc-font-hand);
  font-weight: 400;
}

.oc-en {
  font-family: var(--oc-font-en);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}