/* Korea Run Club — Design tokens
   Ported from the KRC design system (claude.ai/design). */

/* ---- Webfonts (Google Fonts per brand brief) ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- Base palette ---- */
  --krc-black:        #0B0B0D;
  --krc-surface:      #151518;
  --krc-surface-2:    #1C1C21;
  --krc-hairline:     #26262B;
  --krc-hairline-2:   #33333A;

  --krc-white:        #F6F5F4;
  --krc-grey:         #A3A3AB;
  --krc-grey-dim:     #6E6E77;

  /* ---- Mugunghwa accents ---- */
  --krc-pink:         #EC4A86;
  --krc-crimson:      #B31E5F;
  --krc-petal:        #F9C9DE;
  --krc-pink-ink:     #7A123F;

  /* ---- Semantic states ---- */
  --krc-success:      #7FD1A6;
  --krc-warning:      #E8B84B;
  --krc-danger:       #F0616B;

  /* ---- Signature gradient ---- */
  --krc-gradient:        linear-gradient(135deg, #EC4A86 0%, #B31E5F 100%);
  --krc-gradient-soft:   linear-gradient(135deg, #F9C9DE 0%, #EC4A86 100%);

  /* ---- Photography / overlay tokens ---- */
  --krc-overlay-bottom:  linear-gradient(to top, rgba(11,11,13,0.92) 0%, rgba(11,11,13,0.35) 45%, rgba(11,11,13,0) 100%);
  --krc-overlay-full:    linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.35) 40%, rgba(11,11,13,0.85) 100%);
  --krc-overlay-pink:    radial-gradient(60% 60% at 50% 40%, rgba(236,74,134,0.18) 0%, rgba(11,11,13,0) 70%);
  --krc-photo-filter:    saturate(0.9) contrast(1.05) brightness(0.92);

  /* ---- Semantic aliases ---- */
  --bg-base:          var(--krc-black);
  --bg-elevated:      var(--krc-surface);
  --bg-raised:        var(--krc-surface-2);
  --border-hairline:  var(--krc-hairline);
  --border-strong:    var(--krc-hairline-2);

  --text-primary:     var(--krc-white);
  --text-secondary:   var(--krc-grey);
  --text-tertiary:    var(--krc-grey-dim);
  --text-accent:      var(--krc-pink);
  --text-on-accent:   #FFFFFF;

  --accent:           var(--krc-pink);
  --accent-deep:      var(--krc-crimson);
  --accent-soft:      var(--krc-petal);

  --focus-ring:       0 0 0 3px rgba(249,201,222,0.35);
  --focus-ring-solid: 0 0 0 2px rgba(236,74,134,0.9);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-hangul:  "Noto Sans KR", "Inter", sans-serif;
  --font-serif:   "Playfair Display", Georgia, serif;

  --fs-display:   clamp(3.5rem, 7vw, 6rem);
  --fs-h1:        clamp(2.5rem, 4.5vw, 3.75rem);
  --fs-h2:        clamp(2rem, 3.2vw, 2.75rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-overline:  0.75rem;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.02;
  --lh-heading:   1.1;
  --lh-snug:      1.35;
  --lh-body:      1.6;

  --ls-display:   -0.02em;
  --ls-heading:   -0.01em;
  --ls-body:      0;
  --ls-overline:  0.22em;
  --ls-wordmark:  0.18em;

  /* ---- Spacing (4px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  --container-max:  1200px;
  --reading-max:    680px;
  --gutter:         clamp(20px, 5vw, 64px);
  --section-y:      clamp(56px, 7vw, 96px);

  /* ---- Radius, elevation & glow ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 20px 48px rgba(0,0,0,0.55);

  --glow-pink:      0 0 32px rgba(236,74,134,0.35);
  --glow-pink-lg:   0 12px 48px rgba(236,74,134,0.30);
  --glow-petal:     0 0 40px rgba(249,201,222,0.25);

  --lift-hover:  0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--krc-hairline-2);

  /* ---- Motion ---- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:     160ms;
  --dur-base:     260ms;
  --dur-slow:     480ms;
  --dur-reveal:   700ms;

  --reveal-shift: 24px;
}