/* =========================================================
   BITOPLUS Design Tokens
   Single source of truth for colors, typography, spacing,
   radius, shadow, motion. Every other CSS file MUST read
   from these variables — no raw hex codes elsewhere.
   ========================================================= */

:root {
  /* ---------- Color — Primary (Brown) ---------- */
  --color-primary-50:  #f6efe7;
  --color-primary-100: #e8d9c5;
  --color-primary-200: #ccb193;
  --color-primary-300: #a68867;
  --color-primary-400: #94775f;
  --color-primary-500: #8d6e4b;
  --color-primary-600: #7a5a3a;
  --color-primary-700: #6b4423;
  --color-primary-800: #4e2f16;
  --color-primary-900: #2b1a0c;

  /* ---------- Color — Accent (Green) ---------- */
  --color-accent-50:  #eef6e8;
  --color-accent-100: #d4ecc2;
  --color-accent-300: #a4d27e;
  --color-accent-400: #7cb342;
  --color-accent-500: #6fa84c;
  --color-accent-600: #5a8f3c;
  --color-accent-700: #467030;

  /* ---------- Color — Warm Neutral ---------- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #faf8f5;
  --color-neutral-100: #f1ede6;
  --color-neutral-200: #e2dcd2;
  --color-neutral-300: #c8c0b3;
  --color-neutral-400: #9a9286;
  --color-neutral-500: #6f685d;
  --color-neutral-700: #3e3a33;
  --color-neutral-800: #262420;
  --color-neutral-900: #15130f;

  /* ---------- Semantic ---------- */
  --color-success: #4caf50;
  --color-warning: #e0a200;
  --color-danger:  #d64545;
  --color-info:    #3a78c2;

  /* ---------- Aliases ---------- */
  --brand:        var(--color-primary-700);
  --brand-ink:    var(--color-primary-800);
  --brand-soft:   var(--color-primary-100);
  --accent:       var(--color-accent-500);
  --accent-hot:   var(--color-accent-400);

  --bg-page:      var(--color-neutral-0);
  --bg-section:   var(--color-neutral-50);
  --bg-card:      var(--color-neutral-0);
  --bg-card-alt:  var(--color-neutral-100);
  --bg-dark:      var(--color-neutral-900);

  --text-strong:  var(--color-neutral-900);
  --text-body:    var(--color-neutral-700);
  --text-muted:   var(--color-neutral-500);
  --text-invert:  var(--color-neutral-0);

  --border-soft:  var(--color-neutral-200);
  --border-mid:   var(--color-neutral-300);

  /* CTA button palette */
  --btn-primary-bg:     var(--color-primary-500);
  --btn-primary-hover:  var(--color-primary-700);
  --btn-primary-text:   #ffffff;

  /* ---------- Typography — families ---------- */
  --ff-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ff-display: "Montserrat", "Pretendard Variable", "Pretendard", sans-serif;

  /* ---------- Typography — scale (desktop) ---------- */
  --fs-display:  64px;
  --fs-h1:       48px;
  --fs-h2:       40px;
  --fs-h3:       28px;
  --fs-h4:       20px;
  --fs-h5:       18px;
  --fs-h6:       16px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-eyebrow:  13px;
  --fs-count:    72px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;
  --lh-loose:  1.7;

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- Spacing scale ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   80px;
  --sp-10: 120px;
  --sp-11: 160px;

  /* Section / container */
  --section-py-desktop: var(--sp-10);
  --section-py-mobile:  var(--sp-8);
  --container-max:      1280px;
  --container-px-desktop: 40px;
  --container-px-mobile:  20px;

  /* ---------- Breakpoints (reference, used in @media directly) ---------- */
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
  --bp-desktop: 1440px;

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

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(21,19,15,.06), 0 1px 1px rgba(21,19,15,.04);
  --shadow-2: 0 4px 12px rgba(21,19,15,.08), 0 2px 4px rgba(21,19,15,.04);
  --shadow-3: 0 12px 32px rgba(21,19,15,.12), 0 4px 8px rgba(21,19,15,.06);
  --shadow-brand: 0 12px 32px rgba(107,68,35,.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
  --dur-slower: 700ms;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(111,168,76,.45);

  /* ---------- Z-index layers ---------- */
  --z-base:    1;
  --z-sticky: 50;
  --z-fab:    95;
  --z-tabbar: 90;
  --z-header: 80;
  --z-overlay: 100;
  --z-modal:  110;
}

/* ---------- Typography scale — mobile overrides ---------- */
@media (max-width: 640px) {
  :root {
    --fs-display: 36px;
    --fs-h1:      30px;
    --fs-h2:      26px;
    --fs-h3:      22px;
    --fs-h4:      18px;
    --fs-count:   48px;
  }
}