/* =====================================================================
   Cashdudgh Design System — Colors & Type tokens
   Derived from the Figma source of truth (00_캐시더지.fig)
   ===================================================================== */

/* ---- Webfonts --------------------------------------------------------
   Pretendard — primary UI font (Korean + Latin, variable family)
   SUIT       — display / splash headlines (SUIT Project)
   Montserrat — latin accent (labels, numeric display)
   ---------------------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&display=swap');

:root {
  /* ---- Color primitives ---------------------------------------------
     The brand runs on a warm yellow + dark-chocolate palette.
     Yellow 500/600 drives the brand;
     the deep chocolate 900 is "text on yellow" and sits under every CTA.
     ------------------------------------------------------------------- */

  /* Brand yellow ramp */
  --cd-yellow-50:  #FEF5DB;   /* light fill background */
  --cd-yellow-100: #FED344;   /* primary fill / coin */
  --cd-yellow-200: #FFB619;   /* accent orange-yellow, brand hero */
  --cd-yellow-300: #E89900;   /* pressed / accent text */
  --cd-yellow-400: #E8B409;   /* inset highlight on coin */

  /* Chocolate / text ramp (warm brown, not gray) */
  --cd-choc-900: #24160C;     /* primary text on light */
  --cd-choc-800: #302304;     /* heading on yellow bg, toast */
  --cd-choc-700: #272320;     /* nav labels */
  --cd-choc-500: #8A562B;     /* section bg warm brown */
  --cd-choc-300: #C8B99D;     /* muted text */
  --cd-choc-200: #C1B8A5;     /* disabled text */
  --cd-choc-100: #E8E6DD;     /* hairline divider warm */

  /* Neutrals (cool) */
  --cd-white:    #FFFFFF;
  --cd-black:    #000000;
  --cd-ink-900:  #0D0E0F;     /* near-black text for forms */
  --cd-gray-100: #F8F8F8;
  --cd-gray-200: #F4F4F4;     /* card bg */
  --cd-gray-300: #DBDBDB;
  --cd-gray-400: #C9C8C7;
  --cd-gray-500: #B3B2B1;
  --cd-gray-600: #93918F;     /* placeholder */
  --cd-gray-700: #7C8388;
  --cd-gray-800: #404448;

  /* Surfaces */
  --cd-surface-cream:  #FEF5DB;   /* warm app bg */
  --cd-surface-cream2: #EBE6DD;   /* warm card */
  --cd-surface-dim:    rgba(0,0,0,0.5);
  --cd-surface-toast:  rgba(48,35,4,0.9);

  /* Semantic */
  --cd-accent:     var(--cd-yellow-200);
  --cd-accent-ink: var(--cd-choc-800);
  --cd-fg-1:       var(--cd-choc-900);
  --cd-fg-2:       var(--cd-gray-600);
  --cd-fg-3:       var(--cd-gray-500);
  --cd-fg-inv:     var(--cd-white);
  --cd-bg-1:       var(--cd-white);
  --cd-bg-2:       var(--cd-gray-200);
  --cd-bg-warm:    var(--cd-surface-cream);
  --cd-border:     rgba(0,0,0,0.10);
  --cd-border-soft:rgba(0,0,0,0.05);
  --cd-border-inv: rgba(255,255,255,0.60);
  --cd-glass:      rgba(255,255,255,0.30);

  /* Shadows — soft, warm, never blue */
  --cd-shadow-xs:  0 2px 6px rgba(0,0,0,0.10);
  --cd-shadow-sm:  0 2px 8px rgba(0,0,0,0.10);
  --cd-shadow-md:  0 4px 8px rgba(0,0,0,0.10);
  --cd-shadow-lg:  0 8px 12px rgba(0,0,0,0.20);
  --cd-shadow-pop: 0 6px 8px rgba(0,0,0,0.25);          /* floating cash/mole */
  --cd-shadow-coin-inset: inset 0.5px 0.5px 1px var(--cd-yellow-400);

  /* Radii — capsules dominate, cards use 16/20 */
  --cd-radius-xs: 4px;
  --cd-radius-sm: 8px;
  --cd-radius-md: 12px;
  --cd-radius-lg: 16px;
  --cd-radius-xl: 20px;
  --cd-radius-2xl: 24px;
  --cd-radius-pill: 999px;

  /* Spacing (4 / 8 base) */
  --cd-s-0: 0px;
  --cd-s-1: 4px;
  --cd-s-2: 8px;
  --cd-s-3: 12px;
  --cd-s-4: 16px;
  --cd-s-5: 20px;
  --cd-s-6: 24px;
  --cd-s-7: 28px;
  --cd-s-8: 32px;
  --cd-s-10: 40px;
  --cd-s-12: 48px;
  --cd-s-16: 64px;

  /* ---- Type primitives ------------------------------------------ */
  --cd-font-ui:      'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --cd-font-display: 'SUIT Variable', 'SUIT', 'Pretendard', sans-serif;
  --cd-font-latin:   'Montserrat', 'Pretendard', sans-serif;

  /* Weight tokens match the Figma usage */
  --cd-w-light:    300;
  --cd-w-regular:  400;
  --cd-w-medium:   500;
  --cd-w-semibold: 600;
  --cd-w-bold:     700;
  --cd-w-extra:    800;

  /* Letter-spacing — Korean display uses tight tracking */
  --cd-ls-display: -0.05em;
  --cd-ls-tight:   -0.02em;
  --cd-ls-normal:  0;
}

/* =====================================================================
   Semantic type roles — used across slides, UI kit, marketing.
   Numbers below echo actual Figma usage (sizes × weights × lineHeights).
   ===================================================================== */

.cd-display-xl {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-w-extra);
  font-size: 130px;
  line-height: 1;
  letter-spacing: var(--cd-ls-display);
  color: var(--cd-fg-inv);
}
.cd-display-lg {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-w-bold);
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: var(--cd-ls-display);
}
.cd-h1 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: var(--cd-ls-tight);
  color: var(--cd-fg-1);
}
.cd-h2 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: var(--cd-ls-tight);
  color: var(--cd-fg-1);
}
.cd-h3 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 18px;
  line-height: 1.4;
  color: var(--cd-fg-1);
}
.cd-h4 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 16px;
  line-height: 1.4;
  color: var(--cd-fg-1);
}

/* Body */
.cd-body {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-regular);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cd-fg-1);
}
.cd-body-sm {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-regular);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cd-fg-2);
}
.cd-body-xs {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-regular);
  font-size: 11px;
  line-height: 1.45;
  color: var(--cd-fg-2);
}

/* Labels / buttons */
.cd-label {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-semibold);
  font-size: 14px;
  line-height: 1;
  color: var(--cd-fg-1);
}
.cd-label-sm {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-semibold);
  font-size: 12px;
  line-height: 1;
}
.cd-chip {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--cd-ls-tight);
}

/* Numeric (steps / cash display) — always Pretendard Bold */
.cd-numeric-hero {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 40px;
  line-height: 1;
  color: var(--cd-choc-800);
  font-feature-settings: "tnum" 1;
}
.cd-numeric-md {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-w-bold);
  font-size: 16px;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

/* Latin accent — used sparingly on badges/labels */
.cd-latin-caps {
  font-family: var(--cd-font-latin);
  font-weight: var(--cd-w-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}



  html, body { margin: 0; padding: 0; background: var(--cd-yellow-200); color: var(--cd-choc-900); font-family: var(--cd-font-ui); overflow-x: hidden; scroll-behavior: smooth; }
  * { box-sizing: border-box; }
  ::selection { background: var(--cd-choc-900); color: var(--cd-yellow-200); }
  a { color: inherit; }
  button { font-family: var(--cd-font-ui); }
  #root { min-height: 100vh; }

  /* ──────────── Responsive: tablet ≤880, mobile ≤600 ──────────── */
  @media (max-width: 880px) {
    .cd-topnav { padding: 12px 18px !important; }
    .cd-topnav-links { display: none !important; }
    .cd-topnav-brand { font-size: 20px !important; }
    .cd-topnav-cta { padding: 9px 14px !important; font-size: 13px !important; }

    /* hero already collapses; tighten padding */
    .hero-grid { padding: 32px 20px !important; gap: 28px !important; }

    /* store buttons — medium */
    .cd-store-btn { padding: 17px 32px !important; gap: 12px !important; }
    .cd-store-btn .cd-store-label { font-size: 19px !important; }

    /* rewards section: brand grid 2×2 stays, but stats card padding shrinks */
    .rew-grid { gap: 32px !important; }
    .stat-cell { padding: 16px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
    .stat-cell:last-child { border-bottom: none; }
  }

  @media (max-width: 600px) {
    .cd-topnav { padding: 10px 14px !important; }
    .cd-topnav-logo { width: 32px !important; height: 32px !important; }
    .cd-topnav-brand { font-size: 17px !important; }
    .cd-topnav-cta { padding: 8px 12px !important; font-size: 12px !important; }

    /* sections: shrink horizontal padding everywhere */
    section { padding-left: 18px !important; padding-right: 18px !important; }

    /* store buttons — slim down for mobile */
    .cd-store-btn { padding: 14px 24px !important; gap: 10px !important; }
    .cd-store-btn .cd-store-label { font-size: 16px !important; }
    .cd-store-btn svg { width: 20px !important; height: 22px !important; }

    /* rewards: brand cards become single column for breathing room */
    .reward-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .reward-card { transform: none !important; }
    .reward-card:hover { transform: translateY(-6px) scale(1.01) !important; }

    /* faq + cta padding */
    .faq-section { padding: 64px 18px !important; }
    .cta-section { padding: 64px 18px !important; }

    /* scroll walker shrinks on mobile so it doesn't crowd the viewport */
    .cd-walker { transform: scale(.7) !important; transform-origin: bottom center; }

    /* tweaks panel — keep but reduce footprint */
    .twk-panel, [class*="twk-"] { font-size: 13px !important; }
  }