/* =========================================================================
   YAJA Design System — colors_and_type.css
   v1.0 · 2026-04-29
   Single source of truth for color and type tokens.
   ========================================================================= */

/* ---------- Webfonts -----------------------------------------------------
   Nohemi is a paid commercial font and is NOT bundled. Drop the licensed
   files into ./fonts/nohemi/ and uncomment the @font-face block below.
   Until then, Familjen Grotesk (Google Fonts) is used as the closest
   open-source geometric grotesque substitute.
   Pretendard is open-source (SIL OFL) and loaded from its official CDN.
------------------------------------------------------------------------ */

/* Pretendard (Korean body, SIL OFL) — subsetted from its official CDN
 * (only the glyph ranges actually used download; far lighter than one
 * self-hosted 2 MB variable file). */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* Familjen Grotesk (latin display) — self-hosted variable woff2, so no
 * Google Fonts round-trip / external dependency. */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/familjen/FamiljenGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Drop-in target for licensed Nohemi files ----
@font-face {
  font-family: 'Nohemi';
  src: url('./fonts/nohemi/Nohemi-Light.woff2')      format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face { font-family: 'Nohemi'; src: url('./fonts/nohemi/Nohemi-Regular.woff2')   format('woff2'); font-weight: 400; }
@font-face { font-family: 'Nohemi'; src: url('./fonts/nohemi/Nohemi-SemiBold.woff2')  format('woff2'); font-weight: 600; }
@font-face { font-family: 'Nohemi'; src: url('./fonts/nohemi/Nohemi-Bold.woff2')      format('woff2'); font-weight: 700; }
@font-face { font-family: 'Nohemi'; src: url('./fonts/nohemi/Nohemi-ExtraBold.woff2') format('woff2'); font-weight: 800; }
@font-face { font-family: 'Nohemi'; src: url('./fonts/nohemi/Nohemi-Black.woff2')     format('woff2'); font-weight: 900; }
---------------------------------------------------- */

:root {
  /* =====================================================================
     COLOR — primitive tokens
     ===================================================================== */

  /* Base poles */
  --yaja-charcoal:    #1E1E1E;   /* base dark — primary background or text */
  --yaja-white:       #FFFFFF;   /* base light */

  /* Accent */
  --yaja-red:         #FF4848;   /* THE accent. Use sparingly — 1–2 per page. */

  /* Neutral scale (8 steps, charcoal → white) */
  --yaja-gray-900:    #1E1E1E;
  --yaja-gray-800:    #333333;
  --yaja-gray-600:    #6E7380;
  --yaja-gray-500:    #9CA3AF;
  --yaja-gray-400:    #C8CDD7;
  --yaja-gray-300:    #E5E7EB;
  --yaja-gray-100:    #F9FAFD;
  --yaja-gray-0:      #FFFFFF;

  /* Functional (use only when truly necessary) */
  --yaja-success:     #10B981;
  --yaja-warning:     #F59E0B;
  --yaja-error:       #EF4444;   /* distinct from YAJA Red — different role */

  /* Highlight tint (price emphasis row in tables) */
  --yaja-highlight-bg: #FFF4E0;

  /* =====================================================================
     COLOR — semantic tokens
     ===================================================================== */

  /* Foreground (use on light surfaces) */
  --fg-1:             var(--yaja-charcoal);   /* primary text */
  --fg-2:             var(--yaja-gray-800);   /* sub-headings */
  --fg-3:             var(--yaja-gray-600);   /* body / labels */
  --fg-4:             var(--yaja-gray-500);   /* de-emphasized */
  --fg-accent:        var(--yaja-red);

  /* Foreground on dark */
  --fg-1-on-dark:     var(--yaja-white);
  --fg-2-on-dark:     var(--yaja-gray-300);
  --fg-3-on-dark:     var(--yaja-gray-400);

  /* Background */
  --bg-base-light:    var(--yaja-white);
  --bg-base-dark:     var(--yaja-charcoal);
  --bg-subtle:        var(--yaja-gray-100);   /* even-row table, soft panel */
  --bg-card:          var(--yaja-white);

  /* Borders */
  --border-strong:    var(--yaja-gray-400);
  --border-soft:      var(--yaja-gray-300);

  /* =====================================================================
     TYPOGRAPHY — primitives
     ===================================================================== */

  --font-latin:       'Nohemi', 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-korean:      'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-stack:       var(--font-latin), var(--font-korean);

  /* Weights */
  --w-light:          300;
  --w-regular:        400;
  --w-semibold:       600;
  --w-bold:           700;
  --w-extrabold:      800;
  --w-black:          900;

  /* Size scale (px units; pt-equivalent in deck contexts noted) */
  --t-hero-xl:        160px;   /* hero numerals — 160pt */
  --t-hero:           120px;   /* hero numerals — 120pt */
  --t-hero-sm:        96px;    /* hero numerals — 96pt */
  --t-display:        48px;    /* page title  */
  --t-display-sm:     36px;    /* page title  */
  --t-h1:             32px;    /* section title  */
  --t-h2:             24px;    /* section title  */
  --t-h3:             22px;    /* subtitle */
  --t-h4:             18px;    /* subtitle */
  --t-body:           16px;
  --t-body-sm:        14px;
  --t-caption:        13px;
  --t-caption-sm:     11px;

  /* Line height */
  --lh-tight:         1.1;     /* hero numerals */
  --lh-snug:          1.25;    /* display / h1 */
  --lh-base:          1.5;     /* body */
  --lh-loose:         1.6;

  /* Tracking */
  --tr-tight:         -0.04em; /* hero numerals */
  --tr-snug:          -0.02em; /* display / h1 */
  --tr-normal:        0;
  --tr-wide:          0.04em;  /* ALL-CAPS section labels */

  /* =====================================================================
     SPACING — 4px base unit
     ===================================================================== */
  --s-1:              4px;
  --s-2:              8px;
  --s-3:              12px;
  --s-4:              16px;
  --s-5:              24px;
  --s-6:              32px;
  --s-7:              40px;
  --s-8:              60px;
  --s-9:              80px;
  --s-10:             120px;

  /* Page-level rhythm */
  --page-margin:      72px;   /* 60–80 range; 72 = mid */
  --section-gap:      48px;   /* 40–60 range */

  /* =====================================================================
     RADII — universal 4–8px range
     ===================================================================== */
  --r-sm:             4px;    /* small chips, inputs */
  --r-md:             6px;    /* cards, photos */
  --r-lg:             8px;    /* large containers */
  --r-pill:           999px;  /* sparingly: nav tabs, status chips */

  /* =====================================================================
     MOTION
     ===================================================================== */
  --easing:           cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:           120ms;
  --t-slow:           300ms;
  --t-hero-count:     800ms;   /* hero number count-up */

  /* =====================================================================
     STATE
     ===================================================================== */
  --hover-opacity-on-dark:    0.85;
  --hover-opacity-on-light:   0.70;
  --press-scale:              0.98;

  /* =====================================================================
     SHADOWS — INTENTIONALLY EMPTY
     The brand is flat. These tokens exist only to alias to "none" so
     downstream code that expects them never accidentally introduces depth.
     ===================================================================== */
  --shadow-none:      none;
  --shadow-card:      none;
  --shadow-elevated:  none;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply foundational styles to bare HTML so authors can produce
   on-brand output with zero classnames.
   ========================================================================= */

html {
  font-family: var(--font-stack);
  color: var(--fg-1);
  background: var(--bg-base-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--t-body);
  line-height: var(--lh-base);
  font-weight: var(--w-regular);
}

h1 {
  font-family: var(--font-stack);
  font-size: var(--t-display);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
}

h2 {
  font-family: var(--font-stack);
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

h3 {
  font-family: var(--font-stack);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

h4 {
  font-family: var(--font-stack);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  margin: 0 0 var(--s-3);
}

p {
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--t-caption);
  color: var(--fg-3);
}

label, .label {
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Hero numerals — the showpiece */
.hero-num {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.hero-num--xl { font-size: var(--t-hero-xl); }
.hero-num--sm { font-size: var(--t-hero-sm); }
.hero-num--accent { color: var(--fg-accent); }

/* Section eyebrow — ALL CAPS Nohemi */
.eyebrow {
  font-family: var(--font-latin);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}

/* Buttons — minimal, flat */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  font-family: var(--font-stack);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
  line-height: 1;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
  background: var(--yaja-charcoal);
  color: var(--yaja-white);
}
.btn:hover  { opacity: var(--hover-opacity-on-dark); }
.btn:active { transform: scale(var(--press-scale)); }

.btn--primary  { background: var(--yaja-red); color: var(--yaja-white); }
.btn--ghost    { background: transparent; color: var(--fg-1); border: 1px solid var(--border-strong); }
.btn--ghost:hover { opacity: var(--hover-opacity-on-light); }

/* Card */
.card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

/* Dark surface */
.surface-dark {
  background: var(--bg-base-dark);
  color: var(--fg-1-on-dark);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4, .surface-dark p {
  color: var(--fg-1-on-dark);
}
.surface-dark .eyebrow { color: var(--fg-3-on-dark); }

/* Korean / Latin hint helpers — apply when you know the language of the run */
.lang-ko { font-family: var(--font-korean), var(--font-latin), sans-serif; }
.lang-en { font-family: var(--font-latin), sans-serif; }