@charset "UTF-8";

:root {

  --dp-gutter: clamp(20px, 3vw, 40px);

  --dp-w-prose:   640px;
  --dp-w-content: 1120px;
  --dp-w-wide:    1440px;

  --dp-section: clamp(56px, 8vw, 112px);

  --dp-ink:      var(--wp--preset--color--ink);
  --dp-mute:     var(--wp--preset--color--mute);
  --dp-rule:     var(--wp--preset--color--rule);
  --dp-paper:    var(--wp--preset--color--paper);
  --dp-paper-2:  var(--wp--preset--color--paper-2);
  --dp-deep:     var(--wp--preset--color--deep);
  --dp-accent:   var(--wp--preset--color--accent);
  --dp-accent-d: var(--wp--preset--color--accent-deep);
  --dp-accent-l: var(--wp--preset--color--accent-light);

  --dp-signal:   var(--wp--preset--color--signal);
  --dp-signal-d: var(--wp--preset--color--signal-deep);

  --dp-rule-strong: #CBD6DC;

  --dp-alert: #C4302B;

  --dp-s1:  var(--wp--preset--spacing--10);
  --dp-s2:  var(--wp--preset--spacing--20);
  --dp-s3:  var(--wp--preset--spacing--30);
  --dp-s4:  var(--wp--preset--spacing--40);
  --dp-s5:  var(--wp--preset--spacing--50);
  --dp-s6:  var(--wp--preset--spacing--60);
  --dp-s7:  var(--wp--preset--spacing--70);
  --dp-s8:  var(--wp--preset--spacing--80);
  --dp-s9:  var(--wp--preset--spacing--90);
  --dp-s10: var(--wp--preset--spacing--100);

  --dp-font:       var(--wp--preset--font-family--jp);

  --dp-font-serif: var(--wp--preset--font-family--serif);
  --dp-font-num:   var(--wp--preset--font-family--num);

  --dp-font-round: ui-rounded, "Hiragino Maru Gothic ProN",
                   "Hiragino Maru Gothic Pro", "Kosugi Maru", var(--dp-font);

  --dp-lh-body: 1.9;
  --dp-lh-head: 1.45;
  --dp-lh-tight: 1.25;

  --dp-r-sm: 4px;
  --dp-r-md: 8px;
  --dp-r-lg: 16px;
  --dp-r-full: 999px;

  --dp-shadow-1: 0 1px 2px rgba(16,24,32,.06),
                 0 2px 8px rgba(16,24,32,.05);
  --dp-shadow-2: 0 2px 4px rgba(16,24,32,.07),
                 0 8px 24px rgba(16,24,32,.08);

  --dp-border: 1px solid var(--dp-rule);

  --dp-dur:      .22s;
  --dp-dur-slow: .34s;
  --dp-ease: cubic-bezier(.22, .61, .36, 1);

  --dp-z-base:    1;
  --dp-z-sticky:  100;
  --dp-z-drawer:  200;
  --dp-z-overlay: 300;
  --dp-z-modal:   400;
  --dp-z-toast:   500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dp-dur:      .01ms;
    --dp-dur-slow: .01ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}