/* ==========================================================================
 * StartLike Theme - CSS Variables (Design Tokens)
 * Snow Monkey準拠 CSS Custom Properties
 * ========================================================================== */

:root {
  /* ----------------------------------------------------------------
   * Colors
   * ---------------------------------------------------------------- */
  --sl-accent-color: #cd162c;
  --sl-sub-accent-color: #333;
  --sl-text-color: #333;
  --sl-text-color-light: #999;
  --sl-bg-color: #fff;
  --sl-bg-color-gray: #f7f7f7;
  --sl-border-color: #eee;
  --sl-border-color-dark: #ccc;

  /* ----------------------------------------------------------------
   * Layout
   * ---------------------------------------------------------------- */
  --sl-container-max-width: 1280px;
  --sl-slim-width: 720px;
  --sl-sidebar-width: 300px;

  /* ----------------------------------------------------------------
   * Typography
   * ---------------------------------------------------------------- */
  --sl-base-font-family: "Noto Sans JP", sans-serif;
  --sl-base-font-size: 16px;
  --sl-base-line-height: 1.8;
  --sl-base-letter-spacing: 0;
  --sl-h2-margin-top: 2em;
  --sl-h3-margin-top: 1.5em;

  /* ----------------------------------------------------------------
   * Spacing
   * ---------------------------------------------------------------- */
  --sl-space: calc(var(--sl-base-line-height) * 1rem);
  --sl-margin-scale: 1;

  /* ----------------------------------------------------------------
   * Transition
   * ---------------------------------------------------------------- */
  --sl-transition-duration: 0.2s;
  --sl-transition-timing: ease-out;

  /* ----------------------------------------------------------------
   * Border
   * ---------------------------------------------------------------- */
  --sl-border-radius: 3px;

  /* ----------------------------------------------------------------
   * Header
   * ---------------------------------------------------------------- */
  --sl-header-height: 80px;
  --sl-header-height-sm: 60px;

  /* ----------------------------------------------------------------
   * Drawer
   * ---------------------------------------------------------------- */
  --sl-drawer-width: 300px;

  /* ----------------------------------------------------------------
   * Z-index
   * ---------------------------------------------------------------- */
  --sl-z-header: 100;
  --sl-z-drawer: 200;
  --sl-z-overlay: 300;
}