@layer tokens, reset, base, composition, pages, features, affordance, utilities;

@import url("../kiso.css") layer(reset);

@layer tokens {
  :root {
    --color--lightest: #f7f7f7;
    --color--light-gray: #f3f4f6;
    --color--shaded-gray: #e5e7eb;
    --color--darkest: #000;
    --color--very-dark-blue: #111827;
    --color--desaturated-blue: #1f2937;
    --color--dark-grayish-blue: #374151;
    --color--dark-blue: #1e40af;
    --color--strong-blue: #0097d3;
    --color--soft-blue: #60a5fa;
    --color--bright-blue: #3b82f6;
    --foreground--base: light-dark(
      var(--color--desaturated-blue),
      var(--color--light-gray)
    );
    --foreground--primary: light-dark(
      var(--color--strong-blue),
      var(--color--soft-blue)
    );
    --foreground--secondary: light-dark(
      var(--color--dark-blue),
      var(--color--bright-blue)
    );
    --background--base: light-dark(
      var(--color--lightest),
      var(--color--very-dark-blue)
    );
    --background--lighten: light-dark(
      var(--color--light-gray),
      var(--color--desaturated-blue)
    );
    --code--background: light-dark(
      var(--color--light-gray),
      var(--color--desaturated-blue)
    );
    --border-color--base: light-dark(
      var(--color--shaded-gray),
      var(--color--dark-grayish-blue)
    );
    --font-family--montserrat: "Montserrat", sans-serif;
    --leading--tight: 1.25;
    --leading--normal: 1.5;
    --leading--relaxed: 1.75;
    --rounded--md: 12px;
    --rounded--lg: 32px;
    --art-board--max-width: 1280;
    --art-board--min-width: 375;
  }
}

@layer base {
  *,
  ::before,
  ::after {
    min-inline-size: 0;
  }

  :root {
    background-color: var(--background--base);
    color: var(--foreground--base);
    text-underline-offset: calc((1lh - 1em) / 2);
    -webkit-font-smoothing: antialiased;

    &:lang(ja) {
      font-kerning: none;
    }

    &:has(:target):not(:has(:focus-visible)) {
      @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
      }
    }
  }

  :where(:lang(en)) {
    font-family: var(--font-family--montserrat);
    font-size-adjust: cap-height from-font;
    font-kerning: normal;
  }

  :where(h1, h2, h3, h4, h5, h6, caption) {
    font-kerning: normal;

    &:lang(en) {
      text-wrap: balance;
    }

    &:lang(ja) {
      font-feature-settings: "palt";

      @supports (word-break: auto-phrase) {
        text-wrap: balance;
        word-break: auto-phrase;
      }
    }
  }

  :where(h1) {
    margin-block: unset;
  }

  :where(pre) {
    overflow-inline: auto;
    overflow-block: clip;
    overscroll-behavior-inline: contain;

    @supports not (overflow-inline: auto) {
      overflow: auto clip;
    }
  }

  :where(:focus-visible) {
    --_ring--width: 3px;
    --_ring--offset: 3px;

    box-shadow: 0 0 0 calc(var(--_ring--offset) + var(--_ring--width)) Canvas !important;
    outline: var(--_ring--width) solid CanvasText;
    outline-offset: var(--_ring--offset);
  }

  @property --gradient-alpha {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
}

@layer composition {
  .flow {
    display: block flow-root;

    & > * + * {
      margin-block-start: var(--flow--space, 1.5rlh);
    }
  }

  .grid {
    --_c--mode: var(--grid--mode, auto-fit);
    --_c--row-gap: var(--grid--row-gap, 1.5rem);
    --_c--column-gap: var(--grid--column-gap, 1.5rem);
    --_c--column-max-count: var(--grid--column-max-count, 5);
    --_c--column-min-width: var(--grid--column-min-width, 20rem);

    /* コンテナの横幅からギャップの合計値を引いたものをn等分する */
    --_c--column-width-calculated: calc(
      (100% - var(--_c--column-gap) * (var(--_c--column-max-count) - 1)) /
        var(--_c--column-max-count)
    );

    /* 最終的に適用される列の幅。理想の幅と最小幅を比較し、大きい方を採用します。*/
    --_c--column-width: min(
      100%,
      max(var(--_c--column-min-width), var(--_c--column-width-calculated))
    );

    display: block grid;
    grid-template-columns: repeat(
      var(--_c--mode),
      minmax(var(--_c--column-width), 1fr)
    );
    gap: var(--_c--row-gap) var(--_c--column-gap);
  }

  .cluster {
    --_c--row-gap: var(--cluster--row-gap, 1rem);
    --_c--column-gap: var(--cluster--column-gap, 1rem);
    --_c--main-alignment: var(--cluster--main-alignment, normal);
    --_c--cross-alignment: var(--cluster--cross-alignment, normal);

    display: block flex;
    flex-wrap: wrap;
    gap: var(--_c--row-gap) var(--_c--column-gap);
    justify-content: var(--_c--main-alignment);
    align-items: var(--_c--cross-alignment);
  }

  .full-bleed {
    --_c--content-max-width: var(--full-bleed--content-max-width, 64rem);
    --_c--breakout-max-width: var(
      --full-bleed--breakout-max-width,
      calc(var(--_c--content-max-width) + 10rem * 2)
    );
    --_c--gutter: var(--full-bleed--gutter, max(16px, 5%));
    --_c--row-gap: var(--full-bleed--row-gap, 0px);
    --_c--breakout-area-width: calc(
      (var(--_c--breakout-max-width) - var(--_c--content-max-width)) / 2
    );
    --_c--content-area-width: min(
      var(--_c--content-max-width),
      100% - var(--_c--gutter) * 2
    );

    display: block grid;
    grid-template-columns:
      [--full-start]
      minmax(var(--_c--gutter), 1fr)
      [--breakout-start]
      minmax(0, var(--_c--breakout-area-width))
      [--content-start]
      var(--_c--content-area-width)
      [--content-end]
      minmax(0, var(--_c--breakout-area-width))
      [--breakout-end]
      minmax(var(--_c--gutter), 1fr)
      [--full-end];
    row-gap: var(--_c--row-gap);
    align-content: start;

    & > * {
      grid-column: var(--full-bleed--column, --content);
    }
  }
}

@layer affordance {
  @scope (.ui-button) {
    :scope {
      --_accent--primary: #8474fe;
      --_accent--secondary: #4d36d0;
      --_hocus--on: ;
      --_hocus--off: initial;

      --gradient-alpha: var(--_hocus--on, 0%) var(--_hocus--off, 100%);

      display: inline flow-root;
      padding-block: 0.75em;
      padding-inline: 1em;
      border: 1px solid transparent;
      border-radius: var(--rounded--md);
      box-shadow: 0 12px 20px -8px oklch(from var(--_accent--secondary) l c h /
            10%);
      background-color: var(--_accent--secondary);
      background-image: linear-gradient(
        to bottom,
        oklch(from var(--_accent--primary) l c h / var(--gradient-alpha)),
        oklch(from var(--_accent--secondary) l c h / var(--gradient-alpha))
      );
      background-origin: border-box;
      color: var(--color--lightest);
      vertical-align: bottom;
      transition-duration: 300ms;
      transition-property: --gradient-alpha;

      @supports (corner-shape: squircle) {
        border-radius: var(--rounded--lg);
        corner-shape: squircle;
      }

      &:focus-visible {
        --_hocus--on: initial;
        --_hocus--off: ;
      }

      &:any-link:hover {
        @media (any-hover) {
          --_hocus--on: initial;
          --_hocus--off: ;
        }
      }
    }
  }

  @scope (.ui-heading) {
    :scope {
      &::after {
        content: "";
        display: block flow;
        inline-size: min(2em, 100%);
        margin-block-start: 0.5rlh;
        margin-inline: auto;
        border-block-end: 4px solid;
      }
    }
  }

  @scope (.ui-code) {
    :scope {
      display: block grid;
      padding-block: 1rlh;
      padding-inline: 3ch;
      border: 1px solid var(--border-color--base);
      border-radius: var(--rounded--md);
      corner-shape: squircle;
      background-color: var(--code--background);
    }

    code {
      min-inline-size: max-content;
    }
  }

  @scope (.ui-github-button) {
    :scope {
      --_background--default: var(--color--darkest);
      --_background--hocus: oklch(from var(--_background--default) 30% c h);
      --_hocus--on: ;
      --_hocus--off: initial;

      display: inline grid;
      grid-template-columns: 1em 1fr;
      column-gap: 0.5ch;
      align-items: center;
      padding-block: 0.75em;
      padding-inline: 1em;
      border: 1px solid transparent;
      border-radius: var(--rounded--md);
      box-shadow: 0 12px 20px -8px oklch(from var(--color--darkest) l c h / 10%);
      background-color: var(--_hocus--on, var(--_background--hocus))
        var(--_hocus--off, var(--_background--default));
      color: var(--color--lightest);
      vertical-align: bottom;
      transition-duration: 300ms;
      transition-property: background-color;

      @supports (corner-shape: squircle) {
        border-radius: var(--rounded--lg);
        corner-shape: squircle;
      }

      &:focus-visible {
        --_hocus--on: initial;
        --_hocus--off: ;
      }

      &:any-link:hover {
        @media (any-hover) {
          --_hocus--on: initial;
          --_hocus--off: ;
        }
      }

      & > svg {
        inline-size: 100%;
      }
    }
  }

  @scope (.ui-inline-link) {
    :scope {
      --_foreground: var(--inline-link--foreground, var(--foreground--primary));

      color: var(--_foreground);
      text-decoration-line: revert;
      transition-duration: 300ms;
      transition-property: text-decoration-color;

      &:focus-visible {
        text-decoration-color: transparent;
      }

      &:any-link:hover {
        @media (any-hover) {
          text-decoration-color: transparent;
        }
      }
    }
  }
}

@layer utilities {
  /* ======================================================
  //  MARK: typography
  // ====================================================== */
  [class*="-fluid-text"] {
    --_u--relative-max-width: var(--fluid-text--relative-max-width, 1280);
    --_u--relative-min-width: var(--fluid-text--relative-min-width, 375);
    --_u--min-font-size: var(--fluid-text--min-font-size, 14);
    --_u--max-font-size: var(--fluid-text--max-font-size, 16);
    --_u--base-font-size: var(--fluid-text--base-font-size, 16);
    --_u--relative-unit: var(
      --fluid-text--relative-unit,
      100svi
    ); /* 100svi or 100cqi */

    /* slope and intercept calculations */
    --_u--fluid-slope: calc(
      (var(--_u--max-font-size) - var(--_u--min-font-size)) /
        (var(--_u--relative-max-width) - var(--_u--relative-min-width))
    );
    --_u--fluid-intercept: calc(
      var(--_u--min-font-size) - var(--_u--fluid-slope) *
        var(--_u--relative-min-width)
    );

    font-size: clamp(
      var(--_u--min-font-size) / var(--_u--base-font-size) * 1rem,
      var(--_u--fluid-slope) * var(--_u--relative-unit) +
        var(--_u--fluid-intercept) / var(--_u--base-font-size) * 1rem,
      var(--_u--max-font-size) / var(--_u--base-font-size) * 1rem
    );
  }

  .-fluid-text--sm {
    --fluid-text--min-font-size: 12;
    --fluid-text--max-font-size: 14;
  }

  .-fluid-text--md {
    --fluid-text--min-font-size: 16;
    --fluid-text--max-font-size: 20;
  }

  .-fluid-text--lg {
    --fluid-text--min-font-size: 20;
    --fluid-text--max-font-size: 24;
  }

  .-leading--tight {
    line-height: var(--leading--tight);
  }

  .-leading--normal {
    line-height: var(--leading--normal);
  }

  .-leading--relaxed {
    line-height: var(--leading--relaxed);
  }

  .-foreground--primary {
    color: var(--foreground--primary);
  }

  .-foreground--secondary {
    color: var(--foreground--secondary);
  }

  .-text-center {
    text-align: center;
    text-wrap: balance;
  }

  .-trim-both {
    text-box-trim: trim-both;

    &:lang(en) {
      text-box-edge: cap alphabetic;
    }
  }

  .-kerning {
    font-kerning: normal;

    &:lang(ja) {
      font-feature-settings: "palt";
    }
  }

  .-hanging {
    hanging-punctuation: last allow-end;

    &:lang(en) {
      hanging-punctuation: first allow-end last;
    }
  }

  .-uppercase {
    text-transform: uppercase;
  }

  .-auto-phrase {
    &:lang(ja) {
      @supports (word-break: auto-phrase) {
        text-wrap: balance;
        word-break: auto-phrase;
      }
    }
  }

  .-br {
    display: contents;

    &:lang(ja) {
      display: block flow;
    }
  }

  .-wbr {
    display: contents;

    &:lang(ja) {
      display: inline flow-root;
    }
  }
}