/* =========================================================
   굿모닝 디자인 토큰 — 모든 값의 단일 출처
   =========================================================

   이 파일은 **새로 만든 것이 아니라 이미 쓰고 있던 것을 이름 붙인 것**이다.
   구름 위의 돌탑이라는 화면이 먼저 있었고, 색은 거기서 나왔다 —
   모래빛 배경, 돌의 회색, 이끼의 초록, 해 진 뒤의 능선.

   그래서 운영에 떠 있는 값은 그대로 두고, 세 가지만 고쳤다.
   전부 **대비가 기준에 못 미쳐서**이고, 아래 각 자리에 이유를 적어뒀다.

   바꿀 때: 이 파일만 고친다. styleguide.html 이 즉시 그대로 보여준다.
   ========================================================= */

:root {
  /* ---- 원시 스케일: 이끼(Brand) — hsl(76, 13~20%) ----
     출석 버튼과 선택된 이름이 이 색이다. 「오늘 한 것」의 색.
     채도를 20% 아래로 묶는다. 더 올리면 자연석 사이에서 혼자 형광이 된다 */
  --moss-50:  #F6F7F3;
  --moss-100: #E8EBE0;
  --moss-200: #CCD2BC;
  --moss-300: #ACB691;
  --moss-400: #87906F;
  --moss-500: #6B7257;  /* 기준색 — 운영에서 쓰던 --moss 그대로 */
  --moss-600: #575C47;
  --moss-700: #454A36;
  --moss-800: #343829;
  --moss-900: #24261C;

  /* ---- 원시 스케일: 돌(Neutral) — hsl(34~40, 6~24%) ----
     전부 따뜻한 모래빛이다. 차가운 회색을 섞지 않는다 —
     배경이 해 뜰 녘 알프스라 푸른 회색이 얹히면 화면이 둘로 갈라진다.
     200·400·700 은 원래 CSS 에 박혀 있던 값을 회수한 것이다 */
  --stone-0:   #FFFFFF;
  --stone-50:  #F4F2EE;  /* 운영 --bg */
  --stone-100: #E7E2D8;  /* 회수: 설치 칩 테두리에 박혀 있던 값 */
  --stone-200: #DCD8D0;  /* 운영 --line */
  --stone-300: #C9C3B8;  /* 운영 --stone-lt */
  --stone-400: #B3ACA0;  /* 회수: 설치 칩 × 에 박혀 있던 값 */
  --stone-500: #8A857C;  /* 운영 --stone-dk — 돌 색이다. 글자색으로 쓰지 않는다(아래 참고) */
  --stone-600: #746E63;  /* 새로 넣음. --text-subtle 이 AA 를 넘기려면 여기가 필요했다 */
  --stone-700: #5A5247;  /* 회수: 설치 칩 제목에 박혀 있던 값 */
  --stone-900: #2E2B27;  /* 운영 --ink */

  /* ---- 해질녘 ----
     유일하게 파란 쪽(hsl 230)에 있다. 나머지가 34~76 사이인데 혼자 떨어져 있고,
     그게 의도다 — **하루가 넘어간 것을 색으로 알린다.** 17시부터 이 색이 선다.
     이 색을 「그냥 어두운 색」으로 다른 데 쓰지 않는다. 쓰면 신호가 죽는다 */
  --dusk-500: #4A4E63;
  --dusk-600: #3C4053;

  /* ---- 상태 ---- */
  --amber-600: #A8560B;  /* 알림이 안 나갈 때. 운영 값 그대로, 대비 4.69 통과 */
  --amber-50:  #FBF1E4;
  --clay-600:  #9E4A40;  /* 지우기. 운영 #b0584e 는 4.32 로 모자라서 내렸다 */
  --clay-50:   #F7E9E6;

  /* ================= 시맨틱 — 실제로 쓰는 이름 ================= */
  /* 표면 */
  --bg: var(--stone-50);
  --surface: var(--stone-0);
  --surface-2: var(--stone-100);
  --border: var(--stone-200);        /* 장식용 구분선. 대비 규칙 밖이다 */
  --border-strong: #938B7B;          /* 뜻이 있는 경계(입력칸 등). 3:1 을 넘겨야 해서 --stone-500 보다 어둡다 */

  /* 텍스트 */
  --text: var(--stone-900);          /* 12.60:1 */
  --text-muted: var(--stone-700);    /*  6.87:1 */
  --text-subtle: var(--stone-600);   /*  4.52:1 — 운영의 #8A857C 는 3.28 로 본문 기준 미달이었다 */
  --text-on-moss: var(--stone-0);    /*  5.04:1 */

  /* 액션 */
  --primary: var(--moss-500);
  --primary-hover: var(--moss-600);
  --primary-active: var(--moss-700);
  --primary-soft: var(--moss-100);

  /* 저녁 — 하루를 마치는 자리 */
  --evening: var(--dusk-500);
  --evening-hover: var(--dusk-600);

  /* 상태 */
  --warning: var(--amber-600); --warning-soft: var(--amber-50);
  --danger:  var(--clay-600);  --danger-soft:  var(--clay-50);

  /* 포커스 링 — 색만으로 알리지 않는다. 링은 항상 보인다 */
  --ring: rgba(107, 114, 87, .45);

  /* ================= 사진 위 =================
     배경이 사진이라 **대비를 사진이 정한다.** 밝은 구름 위에 흰 글씨가 오면
     계산이 맞지 않는다. 그래서 사진 위의 모든 글자는 둘 중 하나를 반드시 쓴다 —
     유리판 위에 얹거나(--glass-*), 그림자를 깔거나(--text-shadow-on-photo).
     맨몸으로 사진 위에 올라가는 글자는 없다. */
  --glass: rgba(255, 255, 255, .60);      /* 칩·작은 조각 */
  --glass-panel: rgba(255, 255, 255, .82); /* 읽을 글이 있는 판 */
  --glass-solid: rgba(255, 255, 255, .92); /* 오래 읽는 판 */
  --glass-blur: blur(12px);
  --text-on-photo: rgba(255, 255, 255, .95);
  /* 두 겹이다. 한 겹(0 1px 6px)으로는 **밝은 노을 위에서 버티지 못했다** —
     스타일가이드에 실제 사진을 깔고 나서야 보였다. 바깥 겹이 글자 둘레를
     넓게 어둡게 해서 배경이 밝아도 글자 윤곽이 남는다 */
  --text-shadow-on-photo: 0 1px 4px rgba(0, 0, 0, .65), 0 0 16px rgba(0, 0, 0, .45);

  /* ---- 타이포 ----
     제목은 세리프다. 「Good Morning」은 버튼이 아니라 **인사**라서,
     본문과 같은 얼굴이면 인사로 안 읽힌다 */
  --font-body: -apple-system, "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-head: "Noto Serif KR", Georgia, serif;

  /* base 16 · ratio 1.2 (minor third). 도장 찍는 화면이라 밀집형을 쓴다 */
  --fs-2xs: 0.625rem;  /* 10 — 칩에 붙는 「나」 같은 미세 라벨. 이 한 자리에만 */
  --fs-xs:  0.75rem;   /* 12 — 보조 라벨 */
  --fs-sm:  0.8125rem; /* 13 — 힌트·기록 한 줄 */
  --fs-base:0.875rem;  /* 14 — 칩·버튼 */
  --fs-md:  1rem;      /* 16 — 본문·입력 */
  --fs-lg:  1.25rem;   /* 20 */
  --fs-xl:  1.5rem;    /* 24 */
  --fs-2xl: 1.75rem;   /* 28 — 인사말. 24×1.2≈28.8 로 스케일 위에 있다 */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* ---- 간격 — 4px 그리드 ----
     지금 CSS 에는 5·6·7·10·14·28px 이 섞여 있다. 눈에 안 보이지만
     같은 줄에 선 것들이 미세하게 어긋나는 원인이다. 이 값들만 쓴다 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
  --tap-min: 44px;  /* 손가락으로 누르는 것의 최소 크기 */
  /* 1~3px 은 그리드 밖이다. 테두리·선택 표시처럼 **눈속임용**으로만 쓴다 —
     요소 사이를 띄우는 데 쓰면 그때부터 그리드가 무너진다 */
  --hair: 1px; --sp-half: 2px;

  /* ---- 반경 ----
     돌은 각지지 않았다. 그래서 작은 것도 8px 아래로 내리지 않는다 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 22px; --r-full: 999px;

  /* ---- 그림자 — 검정이 아니라 잉크(돌색) 알파 ----
     검정 그림자는 모래빛 배경 위에서 회색으로 뜬다 */
  --shadow-sm: 0 1px 6px rgba(46, 43, 39, .18);
  --shadow: 0 4px 16px rgba(46, 43, 39, .25);
  --shadow-panel: 0 -6px 28px rgba(46, 43, 39, .14);
  --shadow-moss: 0 2px 10px rgba(107, 114, 87, .45);

  /* ---- 모션 ----
     돌이 떨어져 안착하는 것 말고는 움직이지 않는다 */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- z-index ---- */
  --z-base: 0; --z-sticky: 200; --z-overlay: 300; --z-toast: 500;
}

/* 움직임을 줄여달라는 사람에게는 줄인다 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* 다크모드는 두지 않는다.
   배경이 해 뜰 녘 사진이라 어둡게 만들 자리가 없다. 사진을 바꾸지 않는 한
   다크 토큰은 쓰이지 않는 채로 남아 거짓말이 된다 — 그래서 아예 안 적는다. */