/* styles.css */
/* tokens/fonts.css */
/* Pretendard (variable, 45–920) — the system typeface for every role. */
@font-face {
  font-family: "Pretendard";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations"), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2");
}

/* tokens/colors.css */
/* Colour tokens — values copied verbatim from the Figma file. */
:root {
  /* Brand orange (portfolio site) */
  --orange-500: rgb(253,133,58);   /* #FD853A — primary accent, active nav, hero arc */
  --orange-600: rgb(245,121,32);   /* #F57920 — filled pill buttons (Send, See All) */
  --orange-300: rgb(254,178,115);  /* #FEB273 — icon chip in email field */
  --orange-50:  rgb(255,234,213);  /* #FFEAD5 — warm tint text on dark */

  /* Ink / dark surfaces */
  --ink-950: rgb(13,13,13);        /* #0D0D0D — outlined pill on light */
  --ink-925: rgb(16,17,14);        /* #10110E — black pill */
  --ink-900: rgb(23,23,23);        /* #171717 — dark section bg */
  --ink-850: rgb(38,38,38);        /* #262626 */
  --ink-800: rgb(39,39,39);        /* #272727 — footer bg */
  --nav-glass: rgba(0,0,0,0.95);   /* floating nav bar */

  /* Neutral greys (text) */
  --gray-25:  rgb(252,252,253);    /* #FCFCFD — headings on dark */
  --gray-100: rgb(242,244,247);
  --gray-200: rgb(230,234,238);    /* dividers in icon sheets */
  --gray-300: rgb(208,213,221);    /* #D0D5DD — rule on dark */
  --gray-350: rgb(209,209,209);    /* input outline */
  --gray-400: rgb(152,162,179);    /* #98A2B3 — body on dark */
  --gray-600: rgb(71,84,103);      /* #475467 */
  --gray-700: rgb(52,64,84);       /* #344054 — headings on light */
  --gray-800: rgb(29,41,57);       /* #1D2939 */
  --icon-ink: rgb(41,45,50);       /* #292D32 — vuesax icon fill */
  --white-1000: rgb(255,255,255);

  /* Secondary accent (purple) */
  --purple-600: rgb(127,86,217);   /* #7F56D9 — newsletter send */
  --purple-900: rgb(66,48,125);    /* #42307D */
  --gradient-purple: linear-gradient(45.1deg, rgb(66,48,125) 0%, rgb(127,86,217) 100%); /* @kind color */

  /* Core UI kit semantic (Button / Badge / Icon Container families) */
  --destructive-500: rgb(229,70,83);
  --destructive-400: rgb(244,63,94);
  --rose-600: rgb(225,29,72);
  --success-600: rgb(103,156,32);
  --success-500: rgb(120,178,42);
  --slate-900: rgb(15,23,42);
  --slate-800: rgb(30,41,59);
  --slate-600: rgb(71,85,105);
  --slate-200: rgb(226,232,240);

  /* Semantic aliases — night-station gold theme (tokens/theme-gold.css).
     The portfolio orange palette above stays available as reference values. */
  --surface-page: var(--stage-000);
  --surface-dark: var(--stage-050);
  --surface-card: var(--stage-100);
  --surface-light: var(--paper);
  --surface-footer: var(--stage-050);
  --surface-nav: rgba(0,0,0,0.8);
  --text-heading: var(--ink-on-paper);
  --text-heading-on-dark: var(--ink-on-dark);
  --text-body: var(--ink-on-paper);
  --text-body-on-dark: var(--ink-on-dark-2);
  --text-strong: var(--ink-on-dark);
  --accent: var(--gold-400);
  --accent-strong: var(--gold-500);
  --on-accent: var(--gold-ink);
  --border-input: var(--stage-200);
  --border-on-dark: var(--stage-200);
  --danger: var(--danger-400);
}

/* tokens/typography.css */
/* Type tokens. All roles use Pretendard. The file defines no Figma text styles; this scale is
   transcribed from the sizes actually used on the portfolio frame. */
:root {
  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-slab: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-wide: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-alt: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-spec: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;            /* icon-sheet titles */
  --font-meta: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;        /* icon labels */

  --tracking-tight: -0.015em;  /* every Lufga run */
  --tracking-ui: -0.008em;     /* Helvetica Now buttons */
  --leading-solid: 1;          /* 100% — Lufga headings & body */

  --text-hero: 96px;      /* "I'm Jenny, Product Designer" (Urbanist 96) */
  --text-display: 64px;   /* section titles */
  --text-h2: 48px;
  --text-h3: 40px;
  --text-stat: 36px;
  --text-nav-lg: 25.691627502441406px;
  --text-h4: 24px;
  --text-body-lg: 20px;   /* body copy, nav, footer */
  --text-body: 16px;
  --text-ui: 18px;        /* core Button label */
  --text-small: 14px;
}

/* tokens/spacing.css */
/* Layout, radius and effect tokens — exact values from the Desktop frame. */
:root {
  --page-width: 1440px;
  --page-gutter: 71px;         /* section horizontal padding */
  --content-width: 1298px;     /* nav bar / footer rules */
  --section-pad-y: 97px;
  --section-pad-y-dark: 116px;

  --space-5: 5px;
  --space-10: 10px;
  --space-14: 14px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-39: 39px;
  --space-48: 48px;
  --space-96: 96px;

  --radius-input-split: 14px;  /* newsletter field halves */
  --radius-footer: 24px;
  --radius-card: 35px;
  --radius-section: 50px;      /* dark bands, nav bar, email capsule */
  --radius-pill: 60px;         /* nav / CTA pills */
  --radius-full: 1234px;       /* core kit buttons & badges */

  --shadow-sheet: 0px 4px 48px 0px rgba(0,0,0,0.02);
  --blur-glass: blur(15px); /* @kind other */
  --outline-input: inset 0 0 0 1px rgb(209,209,209); /* @kind shadow */
  --outline-accent: inset 0 0 0 2px rgb(253,133,58); /* @kind shadow */
  --scrim-card: linear-gradient(196.754deg, rgba(0,0,0,0) 47.41%, rgba(0,0,0,0.3597) 76.39%, rgba(0,0,0,0.5) 89.23%); /* @kind color */
}

/* tokens/theme-gold.css */
/* Night-station theme — "Christmas Express" event palette.
   Gold is the ONLY accent; everything else is black → charcoal stage.
   Values from the event design brief (피그마_디자인프롬프트_v1 / PRD v2 6-3). */
:root {
  /* Stage */
  --stage-000: #000000;   /* page background */
  --stage-050: #0E0E0E;   /* section */
  --stage-100: #1D1D1F;   /* card */
  --stage-150: #2A2A2D;   /* card hover / hairline on dark */
  --stage-200: #3A3A3D;   /* outline on dark */
  --paper: #F5F5F7;       /* light sections (invitation, boarding steps) */
  --paper-line: #E2E2E6;

  /* Text */
  --ink-on-dark: #FFFFFF;
  --ink-on-dark-2: #A1A1A6;  /* secondary text on dark */
  --ink-on-paper: #1D1D1F;
  --ink-on-paper-2: #6E6E73;

  /* Gold */
  --gold-400: #FFCF6B;       /* CTA, highlights */
  --gold-500: #F5BE4F;       /* hover */
  --gold-600: #E4AA35;       /* pressed */
  --gold-ink: #1D1D1F;       /* text on gold */
  --gold-on-paper: #9A6A00;  /* gold-family text on #F5F5F7 (4.5:1) */

  --danger-400: #FF6B6B;     /* field errors on dark */

  /* Type */
  --xe-font: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --xe-hero: 80px;          /* PC hero max */
  --xe-hero-m: 34px;
  --xe-section: 64px;       /* PC section title max */
  --xe-section-m: 30px;
  --xe-title-weight: 600;
  --xe-body: 17px;
  --xe-small: 15px;

  /* Shape & rhythm */
  --xe-radius-card: 28px;
  --xe-radius-card-m: 20px; /* mobile large images */
  --xe-radius-pill: 999px;
  --xe-section-gap: 160px;
  --xe-section-gap-m: 96px;
  --xe-gutter: 120px;
  --xe-gutter-m: 20px;
  --xe-touch: 44px;
}

/* tokens/theme-village.css */
/* Christmas village mood layer — warm lamplight night, snow, pine & berry decor.
   Gold stays the ONLY interactive accent; pine/berry are decorative only (never text, never CTA). */
:root {
  --ember-000: #0A0705;  /* page — warm black */
  --ember-050: #120D09;  /* section */
  --ember-100: #1C1510;  /* card */
  --ember-150: #2A2018;  /* hairline */
  --ember-200: #3D2F23;  /* outline */
  --lamp-text-2: #C2B3A0; /* secondary text on warm dark (7:1 on ember-050) */
  --snow: #F8F4EE;        /* light "snowfield" sections */
  --snow-line: #E7DED2;
  --snow-ink-2: #6B5E50;
  --lamp: #FFD58A;        /* window-light glow source */
  --lamp-glow: rgba(255, 196, 102, 0.32);
  --pine: #1E3A2A;        /* decor only */
  --pine-2: #2D5440;
  --berry: #B0262E;       /* decor only */
  --rail: #4A3A2C;        /* track ties / rails */
  --rail-steel: #8C7A66;
}

/* components/core/fig-tokens.css */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --background-brand-default: var(--brand-800); /* @kind color */
  --brand-100: rgb(245,245,245); /* @kind color */
  --brand-800: rgb(44,44,44); /* @kind color */
  --font-2: "Pretendard";
  --font: "Pretendard";
  --gray-900: rgb(30,30,30); /* @kind color */
  --icon-default-default: var(--gray-900); /* @kind color */
  --white-1000: rgb(255,255,255); /* @kind color */
  --white: rgb(255,255,255); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --background-brand-default: var(--brand-100); /* @kind color */
  --icon-default-default: var(--white-1000); /* @kind color */
}

/* components/core/fig-typography.css */
/* No TEXT/EFFECT styles in this file. */