tokens.css

@import 'tailwindcss';

/*
 * 색은 gitmoru 앱에서 그대로 가져왔다.
 *
 * 사이트가 자기 팔레트를 고르는 순간 브랜드가 둘로 갈라진다.
 * 앱에서 색을 바꾸면 여기도 바꾼다.
 *
 * 앱의 이유를 그대로 옮겨 적어둔다.
 *   파랑 계열을 버렸다. 보안 도구는 대개 남색, 형광초록으로 겁을 주는데,
 *   이 도구는 겁주는 물건이 아니라 같이 들여다보는 물건이다.
 *   빨강은 어디에도 쓰지 않는다. 이 도구는 "위험하다"고 판정하지 않는다.
 */
@theme {
  /* ── 기계 부분 ── */
  --color-ink: #17181c;
  --color-slate: #1e2026;
  --color-panel: #24272e;
  --color-edge: #3a3e49;
  --color-edge-soft: #2e323b;

  --color-text: #ece9e4;
  --color-muted: #a0a3ae;
  --color-faint: #71757f;

  /* ── 땅 ── */
  --color-grass: #6f9455;
  --color-soil-0: #6d5138;
  --color-soil-1: #5e452f;
  --color-soil-2: #513a27;
  --color-soil-3: #45301f;
  --color-soil-line: #8a6845;
  --color-tunnel: #2e2015;

  /* ── 상태 ── */
  --color-moss: #8fd6a8;
  --color-apricot: #f5b072;
  --color-sand: #e8d089;
  --color-clay: #c98b6b;

  --font-mono: 'JetBrains Mono', 'D2Coding', ui-monospace, monospace;
}

/*
 * 아래는 전부 레이어 안에 넣는다.
 *
 * Tailwind v4 는 유틸리티를 `@layer utilities` 에 넣는데, **레이어 밖에 쓴 규칙은
 * 특정도와 상관없이 레이어 안의 모든 규칙을 이긴다.**
 *
 * 그래서 `a { color: inherit }` 하나가 `text-[#16241c]` 같은 글자색을 전부 덮어썼다.
 * 실제로 초록 버튼 위의 어두운 글씨가 흰색으로 뒤집혀서 읽히지 않았고,
 * 특정도를 0으로 낮춰봐도(`:where`) 소용이 없었다. 레이어가 특정도보다 먼저 갈린다.
 *
 *   base       - 요소 기본값. 유틸리티가 언제든 덮어쓸 수 있어야 한다
 *   components - 우리가 만든 조각. 이것도 유틸리티가 이긴다
 */

@layer base {
  /*
   * 사이트에만 있는 것 - 픽셀 한 칸의 크기.
   *
   * 앱은 13px 글씨에 3px 테두리라 비율이 맞는다. 그런데 1440px 화면에서
   * 64px 헤드라인 옆의 3px 그림자는 의도가 아니라 실수처럼 보인다.
   * 그래서 화면 크기에 묶어둔다. 규칙은 그대로고 크기만 따라 자란다.
   */
  :root {
    --px: clamp(3px, 0.32vw, 7px);
    --px2: calc(var(--px) * 2);
  }

  html {
    scroll-behavior: smooth;
    background: var(--color-ink);
  }

  body {
    margin: 0;
    color: var(--color-text);
    font-family: 'Pretendard', -apple-system, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* 도트 그림은 흐려지면 안 된다 */
  img[data-pixel],
  svg[data-pixel] {
    image-rendering: pixelated;
    shape-rendering: crispEdges;
  }
}

@layer components {
  /*
   * 픽셀 테두리 - 네 모서리가 비어서 8비트 프레임처럼 보인다.
   * 앱의 .px 와 같은 방식이고, 두께만 화면을 따라간다.
   */
  .px {
    border: none;
    border-radius: 0;
    box-shadow:
      0 calc(var(--px) * -1) 0 var(--px-c, var(--color-edge)),
      0 var(--px) 0 var(--px-c, var(--color-edge)),
      calc(var(--px) * -1) 0 0 var(--px-c, var(--color-edge)),
      var(--px) 0 0 var(--px-c, var(--color-edge));
  }

  /* 눌리는 버튼 - 그림자가 사라지면서 실제로 내려간다 */
  .px-btn {
    border: none;
    border-radius: 0;
    box-shadow:
      0 calc(var(--px) * -1) 0 var(--px-c, var(--color-edge)),
      0 var(--px) 0 var(--px-c, var(--color-edge)),
      calc(var(--px) * -1) 0 0 var(--px-c, var(--color-edge)),
      var(--px) 0 0 var(--px-c, var(--color-edge)),
      var(--px) var(--px2) 0 rgb(0 0 0 / 0.45);
    /* 부드럽게 움직이지 않는다. 도트는 한 칸씩 간다. */
    transition:
      transform 60ms steps(1, end),
      box-shadow 60ms steps(1, end);
  }
  .px-btn:active {
    transform: translateY(var(--px));
    box-shadow:
      0 calc(var(--px) * -1) 0 var(--px-c, var(--color-edge)),
      0 var(--px) 0 var(--px-c, var(--color-edge)),
      calc(var(--px) * -1) 0 0 var(--px-c, var(--color-edge)),
      var(--px) 0 0 var(--px-c, var(--color-edge));
  }

  /* 지층 경계 - 위쪽에 밝은 한 줄 */
  .stratum {
    border-top: var(--px) solid var(--color-soil-line);
  }

  /*
   * 흙 알갱이.
   *
   * 그라데이션을 안 쓴다. 도트 격자 옆에 부드러운 번짐이 있으면 결이 깨진다.
   * 대신 같은 색을 한 칸짜리 점으로 흩뿌린다.
   */
  .grit {
    background-image:
      radial-gradient(var(--color-soil-line) 1px, transparent 0),
      radial-gradient(var(--color-tunnel) 1px, transparent 0);
    background-size: 28px 28px, 44px 44px;
    background-position: 0 0, 14px 22px;
    opacity: 0.28;
  }

  /*
   * 줄 나누기는 브라우저한테 맡긴다.
   *
   * 예전에는 문구에 개행을 직접 박아뒀는데, 화면 폭이 조금만 달라져도
   * 엉뚱한 데서 끊긴다. 게다가 언어마다 끊어 읽는 자리가 달라서
   * 한국어 기준으로 넣은 개행이 영어와 일본어에서는 그냥 틀린 자리가 된다.
   *
   *   balance - 제목의 각 줄 길이를 비슷하게 맞춘다
   *   pretty  - 마지막 줄에 한 단어만 남는 것을 막는다
   */
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  /* 한국어와 일본어는 단어 중간에서 끊기면 읽기 나쁘다 */
  :lang(ko),
  :lang(ja) {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

    a {
    color: inherit;
  }

  ::selection {
    background: var(--color-moss);
    color: var(--color-ink);
  }

  /* 움직임을 줄여달라고 한 사람에게는 멈춰서 보여준다 */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}