/* =========================================================
   Goods Guide - Design Tokens
   tokens.css
   v0.1 / 2026-09-13

   NOTE:
   - Initial implementation values derived from current FIX comps.
   - Fine-tune in browser while preserving relative hierarchy.
   ========================================================= */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f7f8f9;
  --color-surface-warm: #fff7f0;

  --color-text: #1f2d3d;
  --color-text-sub: #5f6b76;
  --color-text-muted: #8a949e;

  --color-border: #e4e8ec;
  --color-border-strong: #d4d9de;

  --color-accent: #f56300;
  --color-accent-hover: #e95f00;
  --color-accent-soft: #fff1e7;

  --color-link: #b94700;
  --color-link-hover: #c95000;

  /* Typography */
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  --font-size-3xl: 44px;

  --line-height-tight: 1.35;
  --line-height-heading: 1.45;
  --line-height-body: 1.8;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Layout */
  --container-wide: 1200px;
  --container-main: 1120px;
  --container-article: 960px;

  --page-padding-pc: 32px;
  --page-padding-tablet: 24px;
  --page-padding-sp: 20px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;

  --space-section: 80px;
  --space-section-small: 56px;
  --space-block: 40px;
  --space-card: 24px;

  /* Border / Radius */
  --border-width: 1px;
  --border-default: 1px solid var(--color-border);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-image: 14px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 4px 16px rgba(20, 35, 50, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(20, 35, 50, 0.10);

  /* Buttons / Controls */
  --control-height: 48px;
  --button-height: 52px;
  --button-padding-x: 28px;
  --button-radius: 999px;
  --input-border: #d7dde2;
  --input-focus: var(--color-accent);

  /* Header / Footer */
  --header-height: 76px;
  --header-border: 1px solid var(--color-border);
  --footer-bg: #ffffff;

  /* Images */
  --image-radius: 14px;
  --image-bg: #f4f4f2;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

  /* Z-index */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* TOP browser review additions, 2026-09-13. Orange remains the sole primary accent. */
  --color-on-accent: #ffffff;
  --color-category-bg: #35699d; /* Existing blue secondary label in TOP FIX. */
  --color-category-text: #ffffff;
  --brand-image-sp: 32px;
  --brand-image-pc: 48px;
  --brand-font-sp: 19px;
  --brand-font-pc: 28px;
  --brand-font-footer: 25px;
  --nav-font-pc: 13px;
  --hero-font-sp: 30px;
  --hero-font-tablet: 32px;
  --hero-font-desktop-small: 36px;
  --hero-font-pc: 44px;
  --icon-size: 48px;
  --radius-label: 4px;
  --section-rule-width: 64px;
  --hero-screen-sp: linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.84) 37%, rgba(255,255,255,.97) 62%, #fff 100%);
}