/* ============================================================================
   DEFINE ARTIA — Design Tokens
   Source: close/ (static HTML marketing site by theartpixel for
           SK에코플랜트's 드파인 아르티아 / DEFINE ARTIA, Noryangjin redevelopment)
   ============================================================================ */

/* ------------------ Fonts ------------------ */
@font-face {
  font-family: 'define';
  src: url('fonts/define/DEFINE-Regular.woff2') format('woff2'),
       url('fonts/define/DEFINE-Regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'define';
  src: url('fonts/define/DEFINE-Bold.woff2') format('woff2'),
       url('fonts/define/DEFINE-Bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'lexend';
  src: url('fonts/lexend/Lexend-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'lexend';
  src: url('fonts/lexend/Lexend-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'lexend';
  src: url('fonts/lexend/Lexend-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'lexend';
  src: url('fonts/lexend/Lexend-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'lexend';
  src: url('fonts/lexend/Lexend-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'antro';
  src: url('fonts/antro/Antro_Vectra.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Korean body: Noto Sans KR + Nanum Myeongjo from Google CDN */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

:root {
  /* ==========================================================================
     COLORS — a tight, luxurious palette.
     The site is almost monochromatic: very dark charcoal/brown for text and
     hero chrome, warm beige/taupe golds for accents, cream for soft fills,
     and broad expanses of pure white.
     ========================================================================== */

  /* Foundational */
  --artia-ink:        #231815;   /* primary ink — logo, body text (slightly warm black) */
  --artia-ink-deep:   #271913;   /* contact/sub-headers — deepest, most saturated near-black */
  --artia-black:      #0d0d0d;   /* footer surface, true-black UI */
  --artia-white:      #ffffff;
  --artia-paper:      #fafaf8;   /* subtle off-white alternate */

  /* Warm brown / gold accents (the “premium” signal) */
  --artia-gold:       #987e62;   /* section eyebrow / CTA label gold */
  --artia-brass:      #b79a7d;   /* active tab, hover, button fill */
  --artia-taupe:      #a79b91;   /* category eyebrow, small caps (e.g. LIFE PREMIUM) */
  --artia-chestnut:   #614332;   /* deep warm brown (cursor / tactile elements) */
  --artia-peat:       #7f6c65;   /* footer label muted */

  /* Stone / cream neutrals (backgrounds, dividers) */
  --artia-cream:      #eae5e1;   /* location panel cream */
  --artia-stone:      #bcb3ab;   /* intro overlay, cool-warm beige */
  --artia-sand:       #d7d7d7;   /* hairline divider */
  --artia-fog:        #f3f3f3;   /* scrollbar / subtle fill */

  /* Grays */
  --artia-gray-900:   #191919;
  --artia-gray-700:   #383838;
  --artia-gray-500:   #7e7e7e;   /* body muted, e.g. address sub-text */
  --artia-gray-400:   #858585;
  --artia-gray-300:   #adadad;
  --artia-gray-200:   #cacaca;
  --artia-gray-100:   #e9eaec;

  /* Semantic */
  --artia-fg-1:       var(--artia-ink);       /* primary text */
  --artia-fg-2:       var(--artia-gray-500);  /* secondary / body muted */
  --artia-fg-3:       var(--artia-gray-400);  /* tertiary / captions */
  --artia-fg-inverse: var(--artia-white);
  --artia-bg-1:       var(--artia-white);
  --artia-bg-2:       var(--artia-fog);
  --artia-bg-3:       var(--artia-cream);
  --artia-bg-dark:    var(--artia-black);
  --artia-border:     var(--artia-sand);
  --artia-border-strong: var(--artia-gray-700);
  --artia-accent:     var(--artia-brass);
  --artia-accent-ink: var(--artia-gold);

  /* Scrim / glass */
  --artia-scrim-80:   rgba(0,0,0,0.80);
  --artia-scrim-60:   rgba(0,0,0,0.60);
  --artia-scrim-30:   rgba(0,0,0,0.30);
  --artia-glass-w:    rgba(255,255,255,0.06);
  --artia-glass-b:    rgba(0,0,0,0.04);

  /* ==========================================================================
     TYPE FAMILIES
     - 'define' is a custom display serif-ish geometric sans. Used large for
        hero titles, section headers, numerics, and Korean display text.
     - 'lexend' drives Latin UI / captions / navigation.
     - 'Noto Sans KR' is the Korean body workhorse.
     - 'Nanum Myeongjo' is the occasional Korean serif for editorial quotes.
     - 'antro' is a hand-drawn script used sparingly for signature accents.
     ========================================================================== */
  --font-display:  'define', 'Nanum Myeongjo', serif;     /* brand display */
  --font-sans:     'Noto Sans KR', 'lexend', system-ui, sans-serif; /* UI body (Korean-first) */
  --font-latin:    'lexend', 'Helvetica Neue', Arial, sans-serif;   /* Latin caption / nav */
  --font-serif:    'Nanum Myeongjo', 'Noto Serif KR', serif;        /* editorial Korean serif */
  --font-script:   'antro', cursive;                                /* signature script */

  /* ==========================================================================
     TYPE SCALE  (desktop; all in rem. 1rem = 16px)
     Matches common specimens found in the source stylesheet.
     ========================================================================== */
  --text-xs:    0.75rem;     /* 12px — footer micro / caption */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px — body */
  --text-md:    1.125rem;    /* 18px — sub-heads */
  --text-lg:    1.375rem;    /* 22px — section eyebrow (Korean) */
  --text-xl:    1.75rem;     /* 28px */
  --text-2xl:   2.25rem;     /* 36px */
  --text-3xl:   2.625rem;    /* 42px — phone number */
  --text-4xl:   3.125rem;    /* 50px — section title */
  --text-5xl:   4.125rem;    /* 66px — CONTACT */
  --text-6xl:   4.75rem;     /* 76px — premium section 'YOUR NEXT DEFINE' */
  --text-7xl:   5.25rem;     /* 84px — brand hero */

  /* Letter-spacing & weight helpers */
  --tracking-tight:   -0.0625rem;
  --tracking-normal:  0;
  --tracking-wide:    0.0625rem;
  --tracking-wider:   0.125rem;
  --tracking-widest:  0.4rem;     /* hero caps */

  /* ==========================================================================
     SPACING / RADIUS / SHADOW / MOTION
     The brand uses almost NO rounded corners. Circles are used for icon
     buttons (top-btn, guest-close). Shadows are rare and subtle.
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.625rem;   /* footer top pad */
  --space-9: 7.1875rem;  /* premium title offset */

  --radius-none:   0;
  --radius-sm:     2px;
  --radius-pill:   999px;
  --radius-round:  100%;

  --shadow-text:   0 0 5px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.7);
  --shadow-card:   0 2px 30px rgba(0,0,0,0.06);
  --shadow-hero:   0 10px 60px rgba(0,0,0,0.25);

  --ease-slow:     cubic-bezier(0.6, 0, 0.2, 1);
  --ease-fp:       cubic-bezier(0.7, 0, 0.3, 1);    /* fullPage.js feel */
  --dur-fast:      0.3s;
  --dur-med:       0.8s;
  --dur-slow:      1.2s;
  --dur-xslow:     1.5s;
}

/* ==========================================================================
   SEMANTIC HTML DEFAULTS  (import, then author content inside a `.artia` scope
   or use these classes directly)
   ========================================================================== */
.artia, .artia-type {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--artia-fg-1);
  background: var(--artia-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking-tight);
}

/* Display (Korean + Latin mixed, DEFINE font) */
.artia-h1, .artia h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-7xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--artia-fg-1);
}
.artia-h2, .artia h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--artia-ink-deep);
}
.artia-h3, .artia h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--artia-fg-1);
}
.artia-h4, .artia h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
}
.artia-eyebrow {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--artia-taupe);
}
.artia-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--artia-gold);
}
.artia-body, .artia p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--artia-fg-2);
  letter-spacing: var(--tracking-tight);
}
.artia-body-strong { color: var(--artia-fg-1); }
.artia-caption {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--artia-fg-3);
  letter-spacing: 0;
}
.artia-script {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
  line-height: 1;
}
.artia-serif-editorial {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.9;
  color: var(--artia-fg-1);
}
.artia-numeric {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 0.7;
  letter-spacing: 0;
}

/* small helpers */
.artia-divider-line {
  width: 1px; height: 2.375rem;
  background: var(--artia-gray-700);
  display: inline-block;
}