/* =====================================================================
   파밀리에 드 마스코타 — 디자인 토큰
   Figma "Foundation" 페이지(node 381:449)에서 추출한 색상 스케일.
   값은 raw hex 그대로(디자인에 변수 바인딩이 거의 없음).
   ===================================================================== */
:root {
  /* ---- Common ---- */
  --c-white: #ffffff;
  --c-black: #000000;

  /* ---- Neutral (Gray) ---- */
  --neutral-100: #fbfbfb;
  --neutral-95:  #f7f7f7;
  --neutral-90:  #eaebec;
  --neutral-80:  #dbdcdf;
  --neutral-70:  #c2c4c8;
  --neutral-60:  #9b9b9b;
  --neutral-50:  #737373;
  --neutral-40:  #5c5c5c;
  --neutral-30:  #474747;
  --neutral-20:  #2a2a2a;
  --neutral-10:  #171717;
  --gray-700:    #6f6f6f; /* Figma 변수 GrayScale/700 */

  /* ---- Orange (Primary / 브랜드) ---- */
  --orange-100: #fff8f4;
  --orange-95:  #ffe6db;
  --orange-90:  #ffd2bf;
  --orange-80:  #ffac8a;
  --orange-70:  #ff8555;
  --orange-65:  #ff5f20;
  --orange-60:  #ea611b;
  --orange-55:  #d45818;
  --orange-50:  #bf4f16;
  --orange-45:  #9e4112;
  --orange-40:  #7e340e;
  --orange-30:  #5e2609;
  --orange-20:  #3d1805;
  --orange-10:  #120600;

  /* ---- Red ---- */
  --red-100: #fff5f5;
  --red-95:  #ffe0e0;
  --red-90:  #ffc2c2;
  --red-80:  #ff8a8a;
  --red-70:  #f95353;
  --red-65:  #f23030;
  --red-60:  #e81a1a;
  --red-50:  #e70f0f;
  --red-40:  #b00b0b;
  --red-30:  #820808;

  /* ---- Green (Point) ---- */
  --green-100: #f0faf8;
  --green-95:  #d1f0ea;
  --green-90:  #a8e3d7;
  --green-80:  #5ecab8;
  --green-70:  #1eb5a0;
  --green-65:  #00a88d;
  --green-60:  #009a80;
  --green-55:  #008c73;
  --green-50:  #007e67;
  --green-40:  #00715b;
  --green-30:  #005a48;
  --green-20:  #003b30;

  /* =================================================================
     Semantic tokens
     ================================================================= */
  --color-primary:        var(--orange-65);  /* #ff5f20 */
  --color-primary-hover:  var(--orange-60);  /* #ea611b */
  --color-primary-weak:   var(--orange-100); /* #fff8f4 */
  --color-primary-tint:   var(--orange-95);  /* #ffe6db */
  --color-point:          var(--green-65);   /* #00a88d */

  --color-text-strong:    var(--neutral-10); /* 본문 강조/제목 */
  --color-text:           var(--neutral-20);
  --color-text-sub:       var(--neutral-50);
  --color-text-muted:     var(--neutral-60);
  --color-text-disabled:  var(--neutral-70);

  --color-line:           var(--neutral-90);
  --color-line-strong:    var(--neutral-80);
  --color-bg:             var(--c-white);
  --color-bg-soft:        var(--neutral-95);
  --color-bg-placeholder: var(--neutral-90);

  --color-sale:           var(--orange-65); /* 할인율/세일가 */

  /* ---- Layout ---- */
  --page-width: 1920px;
  --content-width: 1200px;
  --content-gutter: 360px; /* (1920-1200)/2 */

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-pop:  0 4px 16px rgba(0, 0, 0, 0.12);

  /* ---- Font ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---- Typography scale ----
     전 페이지 공통 팔레트. 새 화면/컴포넌트는 px 직접 지정 대신 이 토큰을 우선 사용한다. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-body: 16px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-title-sm: 22px;
  --fs-title-md: 24px;
  --fs-title-lg: 28px;
  --fs-title-xl: 32px;
  --fs-display: 40px;

  --lh-tight: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking: 0;
}