/**
 * Design tokens — hryktkuch.com
 * カスタマイズはここだけ触れば OK
 */

:root {
  /* ── Color: neutral ── */
  --color-bg:           #faf9f7;
  --color-bg-subtle:    #f3f1ed;
  --color-bg-muted:     #e8e5df;
  --color-surface:      #ffffff;
  --color-border:       #d4d0c8;
  --color-border-strong:#a8a299;

  --color-text:         #1a1917;
  --color-text-muted:   #5c5850;
  --color-text-subtle:  #8a857c;

  /* ── Color: accent ── */
  --color-accent:       #2d6a6a;
  --color-accent-hover: #245656;
  --color-accent-subtle:#e6f0f0;
  --color-on-accent:    #ffffff;

  /* ── Color: semantic ── */
  --color-success:      #2d6a4f;
  --color-success-bg:   #e8f5ee;
  --color-warning:      #8a6d1a;
  --color-warning-bg:   #faf3dc;
  --color-error:        #9b2c2c;
  --color-error-bg:     #fce8e8;

  /* ── Typography ── */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  2rem;      /* 32px */
  --font-size-4xl:  2.5rem;    /* 40px */

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

  --line-height-tight:  1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Layout ── */
  --container-sm:  36rem;  /* 576px */
  --container-md:  48rem;  /* 768px */
  --container-lg:  64rem;  /* 1024px */
  --container-xl:  75rem;  /* 1200px */

  --content-padding: var(--space-4);

  /* ── Radius ── */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-full: 9999px;

  /* ── Shadow (flat — 控えめ) ── */
  --shadow-sm: 0 1px 2px rgb(26 25 23 / 0.06);
  --shadow-md: 0 2px 8px rgb(26 25 23 / 0.08);

  /* ── Motion ── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ── */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #141312;
    --color-bg-subtle:    #1c1b19;
    --color-bg-muted:     #2a2826;
    --color-surface:      #1c1b19;
    --color-border:       #3d3a36;
    --color-border-strong:#5c5850;

    --color-text:         #f0ede8;
    --color-text-muted:   #a8a299;
    --color-text-subtle:  #7a756c;

    --color-accent:       #5aabab;
    --color-accent-hover: #6cbcbc;
    --color-accent-subtle:#1a2e2e;
    --color-on-accent:    #141312;

    --color-success:      #6bcb8a;
    --color-success-bg:   #1a2e22;
    --color-warning:      #d4b44a;
    --color-warning-bg:   #2a2410;
    --color-error:        #e07070;
    --color-error-bg:     #2e1a1a;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.4);

    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  }
}