/* =====================================================================
   Design Tokens — コープデリ「つかうほど、じぶんらしく」
   Figma(miraAI) 変数定義より生成。直値ではなく必ずこの変数を参照すること。
   ===================================================================== */
:root {
  /* ---- Color: Main ---- */
  --color-primary:         #39871f;
  --color-primary-dark:    #08650b;
  --color-primary-light:   rgba(185, 223, 158, .24); /* #b9df9e 24% */
  --color-secondary:       #a06a00;
  --color-secondary-light: rgba(235, 197, 145, .24); /* #ebc591 24% */

  /* ---- Color: Background / Container ---- */
  --bg-default:            #fbf7f2;
  --container-white:       #ffffff;
  --container-white-alfa:  rgba(255, 255, 255, .64);
  --container-highlight:   #f5f1dd;
  --container-level1:      #f5efe8;
  --container-level2:      #ede5da;
  --container-level3:      #e8dbca;
  --container-alfa:        rgba(44, 41, 36, .40);
  --container-yellow:      #fff2b5;
  --container-pink:        #ffd7d0;
  --container-green:       #e0f2bd;
  --container-cyan:        #d2eeee;

  /* ---- Color: Text ---- */
  --text-default:   #2c2924;
  --text-muted:     #847e75;
  --text-primary:   #39871f;
  --text-secondary: #734d00;
  --text-white:     #ffffff;
  --text-link:      #006b1c;
  --text-orange:    #f5a200;
  --text-pink:      #e35f5f;
  --text-cyan:      #2398b2;

  /* ---- Color: Border ---- */
  --border-primary:   #39871f;
  --border-secondary: #6b4311;
  --border-default:   #d8d2ca;
  --border-light:     #e9e3dc;
  --border-dark:      #c3b4a0;
  /* 破線区切り（#6B4311 / 破線4px・間隔6px・太さ1px）。CSSのdashedは長さ指定できないためグラデで再現。
     使い方: height:1px; background: var(--divider-dashed); （縦線が必要な場合は --divider-dashed-y） */
  --divider-dashed:   repeating-linear-gradient(to right, #6b4311 0 4px, transparent 4px 10px);
  --divider-dashed-y: repeating-linear-gradient(to bottom, #6b4311 0 4px, transparent 4px 10px);

  /* ---- Color: Icon ---- */
  --icon-default:   #2c2924;
  --icon-primary:   #39871f;
  --icon-secondary: #949494;
  --icon-white:     #ffffff;

  /* ---- Effects ---- */
  --focus-ring:           #0b57d0;
  --overlay-hover-black:  rgba(0, 0, 0, .16);
  --overlay-hover-white:  rgba(255, 255, 255, .16);
  --overlay-hover-text:   rgba(235, 197, 145, .16);
  --overlay-shadow:       rgba(0, 0, 0, .08);

  /* ---- Spacing (4px base) ---- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-72:  72px;
  --space-80:  80px;
  --space-120: 120px;

  /* ---- Radius ---- */
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-24:   24px;
  --radius-40:   40px;
  --radius-64:   64px;
  --radius-full: 9999px;

  /* ---- Typography ---- */
  /* Mac は Hiragino。Windows は Yu Gothic Light がやせて見えるため Meiryo を優先。
     （Meiryo は Hiragino/Yu Gothic が無い Windows でのみ当たる＝Mac の見た目は不変） */
  --font-base: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Meiryo", "Yu Gothic",
               "Noto Sans JP", sans-serif;
  --fw-light: 300; /* W3 */
  --fw-bold:  600; /* W6 */

  /* font shorthand tokens: weight / size / line-height / letter-spacing */
  --heading-40: 600 40px/58px;  --ls-heading-40: 0;
  --heading-24: 600 24px/38px;  --ls-heading-24: 4px;
  --heading-20: 600 20px/34px;  --ls-heading-20: 4px;
  --heading-16: 600 16px/24px;  --ls-heading-16: 0;
  --heading-14: 600 14px/22px;  --ls-heading-14: 0;
  --top-body-16: 600 16px/34px; --ls-top-body-16: 0;
  --body-16: 300 16px/26px;     --ls-body-16: 0;
  --body-14: 300 14px/22px;     --ls-body-14: 4px;
  --body-12: 300 12px/18px;     --ls-body-12: 4px;

  /* ---- Layout / Breakpoints (参考値。@media内では直接px記述) ---- */
  --bp-tablet:     600px;
  --bp-desktop:    1024px;
  --bp-wide:       1440px;
  --container-max: 1280px; /* 1440 - 80*2 */
  --container-pad: var(--space-16);
}

@media (min-width: 1024px) {
  :root { --container-pad: var(--space-80); }
}