/* ============================
   Design Tokens — Data & Canvas
   ============================ */

:root {
  /* --- Colors --- */
  --color-base:        #F9F9F9;
  --color-base-alt:    #F2F0ED;
  --color-main:        #333333;
  --color-sub:         #666666;
  --color-muted:       #999999;
  --color-accent:      #8B5A2B;
  --color-accent-dark: #6E471F;
  --color-accent-light:#B07A50;
  --color-white:       #FFFFFF;
  --color-border:      #E5E2DF;

  /* --- Typography --- */
  --font-sans:   'Inter', 'Noto Sans JP', sans-serif;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.5rem;    /* 24px */
  --font-size-xl:   2rem;      /* 32px */
  --font-size-2xl:  2.75rem;   /* 44px */
  --font-size-3xl:  3.5rem;    /* 56px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --line-height-tight:  1.3;
  --line-height-normal: 1.65;
  --line-height-loose:  1.85;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --content-max-width: 1100px;
  --content-padding:   clamp(1.25rem, 5vw, 2.5rem);

  /* --- Border Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.13);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}