/* =========================================================================
   PRIENZ — Colors & Type Tokens
   AI인데 따뜻하다. Geometric sans + warm rounded surfaces +
   green→blue brand gradient.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  --brand-green:        #00D4AA;
  --brand-blue:         #00B4D8;
  --brand-gradient:     linear-gradient(135deg, #00D4AA 0%, #00B4D8 100%);
  --brand-gradient-soft:linear-gradient(135deg, rgba(0,212,170,0.12) 0%, rgba(0,180,216,0.12) 100%);

  --bg:                 #FAFBFC;
  --surface:            #FFFFFF;
  --surface-alt:        #F5F5F5;
  --section-mint:       #F0FAFA;
  --section-sky:        #F0F7FF;
  --section-dark:       #111827;

  --fg1:                #111827;
  --fg2:                #6B7280;
  --fg3:                #9CA3AF;
  --fg-on-dark:         #FFFFFF;
  --fg-on-brand:        #FFFFFF;

  --border:             #E5E7EB;
  --border-strong:      #D1D5DB;
  --divider-on-dark:    #1F2937;

  --success:            #00D4AA;
  --success-soft:       #ECFDF5;
  --warning:            #F59E0B;
  --warning-soft:       #FFFBEB;
  --error:              #EF4444;
  --error-soft:         #FEF2F2;
  --info:               #00B4D8;
  --info-soft:          #F0F7FF;

  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-brand:       0 8px 24px rgba(0, 180, 216, 0.18);

  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  --space-2xs:          2px;
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          64px;
  --space-4xl:          96px;

  --content-max:        1200px;
  --gutter:             24px;
  --section-py:         96px;

  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:            cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:          100ms;
  --dur-short:          200ms;
  --dur-medium:         300ms;
  --dur-long:           500ms;

  --font-display:       'Plus Jakarta Sans', 'Pretendard', system-ui, -apple-system, sans-serif;
  --font-body:          'DM Sans', 'Pretendard', system-ui, -apple-system, sans-serif;
  --font-mono:          'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:            72px;
  --fs-h1:              52px;
  --fs-h2:              40px;
  --fs-h3:              26px;
  --fs-body-lg:         21px;
  --fs-body:            18px;
  --fs-small:           16px;
  --fs-caption:         14px;

  --lh-tight:           1.15;
  --lh-snug:            1.25;
  --lh-normal:          1.6;
  --lh-relaxed:         1.7;
  --tracking-label:     0.12em;
}

@media (max-width: 768px) {
  :root {
    --fs-hero:          44px;
    --fs-h1:            32px;
    --fs-h2:            26px;
    --fs-h3:            22px;
    --fs-body-lg:       18px;
    --fs-body:          16px;
    --fs-small:         14px;
    --fs-caption:       13px;
    --section-py:       72px;
    --gutter:           20px;
  }
}

.t-hero  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero);    line-height: var(--lh-tight);  color: var(--fg1); letter-spacing: -0.01em; }
.t-h1    { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1);      line-height: var(--lh-snug);   color: var(--fg1); }
.t-h2    { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2);      line-height: var(--lh-snug);   color: var(--fg1); }
.t-h3    { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);      line-height: var(--lh-snug);   color: var(--fg1); }
.t-body-lg { font-family: var(--font-body);  font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); }
.t-body  { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--fg1); }
.t-small { font-family: var(--font-body);    font-weight: 500; font-size: var(--fs-small);   line-height: 1.5;              color: var(--fg2); }
.t-caption { font-family: var(--font-body);  font-weight: 500; font-size: var(--fs-caption); line-height: 1.5;              color: var(--fg3); }
.t-mono  { font-family: var(--font-mono);    font-weight: 400; font-size: var(--fs-small);   color: var(--fg2); }

.t-section-label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.t-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}