/* =========================================================================
   CULCAT — Colors & Type
   Local art brand from Vietnam. Cats + Vietnamese culture.
   Tuxedo-cat tuxedo palette: black + cream-white, with playful accents
   pulled from Hanoi street life (neon signs, bia hơi, motorbike paint).
   ========================================================================= */

/* ---------- WEB FONTS ---------- */
/* @import PHẢI là quy tắc đầu tiên của file (chỉ @charset/@layer được đứng
   trước). Trước đây nó nằm SAU khối @font-face bên dưới, nên trình duyệt loại
   bỏ nó im lặng và Bungee/Outfit KHÔNG BAO GIỜ được tải — mọi chữ hiển thị rơi
   về 'Super Mario 256', thứ chỉ có 96 glyph ASCII, nên chữ tiếng Việt có dấu
   phải mượn font hệ thống ngay giữa từ ("VỀ ĐỘI" = V + Ề của font khác).
   Đừng chèn bất cứ thứ gì lên trên dòng này. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800;900&family=Bungee&display=swap');

/* Chữ hiển thị: Bungee — có subset `vietnamese` đầy đủ (U+1EA0–1EF9).
   Chữ nội dung: Be Vietnam Pro — thay cho Outfit, xem ghi chú ở --font-body.
   Super Mario 256 là font thật của logo CULCAT, chỉ dùng cho wordmark. */
@font-face {
  font-family: 'Super Mario 256';
  src: url('fonts/SuperMario256.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  /* File này chỉ có ASCII. Khoá lại đúng phạm vi đó để trình duyệt không bao
     giờ hỏi nó một chữ có dấu rồi phải chắp vá bằng font hệ thống — chữ tiếng
     Việt sẽ đi thẳng xuống font kế tiếp trong stack. */
  unicode-range: U+0000-00FF;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Core tuxedo palette — the cat */
  --culcat-black:        #0E0E0E;     /* true tuxedo black (ink) */
  --culcat-ink:          #1A1A1A;     /* softer black for body text */
  --culcat-cream:        #F5EFE1;     /* off-white, hand-printed tee feel */
  --culcat-paper:        #FAF6EC;     /* lighter paper for surfaces */
  --culcat-white:        #FFFFFF;

  /* Accent palette — Vietnamese street colors */
  --culcat-red:          #E63329;     /* flag red, phở bò, lucky envelopes */
  --culcat-yellow:       #FFC83D;     /* star yellow, bia hơi crate yellow */
  --culcat-mint:         #7FD1B9;     /* che, retro tile */
  --culcat-sky:          #6FB7D6;     /* enamel blue */
  --culcat-pink:         #F4A4B7;     /* sakura, pork floss */
  --culcat-peach:        #F4C89B;     /* warm highlight */
  --culcat-green:        #2E8B57;     /* banh chung green */

  /* Neutrals */
  --culcat-stone-100:    #EDE6D4;
  --culcat-stone-200:    #D9CFB8;
  --culcat-stone-300:    #B8AD93;
  --culcat-stone-400:    #827963;
  --culcat-stone-500:    #4B4637;
  --culcat-stone-600:    #2A271E;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:                  var(--culcat-cream);
  --bg-alt:              var(--culcat-paper);
  --surface:             var(--culcat-white);
  --surface-inverse:     var(--culcat-black);

  --fg1:                 var(--culcat-ink);      /* primary text */
  --fg2:                 var(--culcat-stone-500); /* secondary text */
  --fg3:                 var(--culcat-stone-400); /* tertiary / captions */
  --fg-on-dark:          var(--culcat-cream);
  --fg-inverse:          var(--culcat-cream);

  --border:              var(--culcat-ink);       /* brand uses heavy borders */
  --border-soft:         var(--culcat-stone-200);
  --border-heavy-width:  3px;

  --accent:              var(--culcat-red);
  --accent-fg:           var(--culcat-cream);
  --highlight:           var(--culcat-yellow);

  --success:             var(--culcat-green);
  --warning:             var(--culcat-yellow);
  --danger:              var(--culcat-red);
  --info:                var(--culcat-sky);

  /* ---------- TYPOGRAPHY ---------- */
  /* "Titan One" = Super-Mario-style display stand-in.
     "Fredoka" = rounded, friendly UI sans.
     "Baloo 2" = slightly chunkier body alt. */
  --font-display:        'Bungee', 'Super Mario 256', system-ui, sans-serif;
  /* Outfit (bản thiết kế đề xuất) KHÔNG có subset tiếng Việt trên Google Fonts:
     chỉ latin + latin-ext, thiếu trọn khối U+1EA0–1EF9 (ạ ề ộ ị ớ ứ …). Dùng nó
     thì mọi nguyên âm có dấu thanh phải mượn font hệ thống ngay giữa từ.
     Be Vietnam Pro cùng kiểu sans hình học, và được vẽ riêng cho dấu tiếng Việt. */
  --font-body:           'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:               11px;
  --fs-sm:               13px;
  --fs-md:               15px;
  --fs-lg:               17px;
  --fs-xl:               20px;
  --fs-2xl:              26px;
  --fs-3xl:              32px;
  --fs-4xl:              42px;
  --fs-5xl:              56px;
  --fs-6xl:              76px;

  --lh-tight:            1.05;
  --lh-snug:             1.25;
  --lh-normal:           1.45;
  --lh-relaxed:          1.6;

  --tracking-display:    -0.01em;
  --tracking-body:       0;
  --tracking-caps:       0.08em;

  /* ---------- RADII ---------- */
  /* Culcat leans generous and rounded — pill buttons, chunky cards */
  --radius-xs:           4px;
  --radius-sm:           8px;
  --radius-md:           14px;
  --radius-lg:           20px;
  --radius-xl:           28px;
  --radius-pill:         999px;

  /* ---------- SHADOWS ---------- */
  /* Hand-printed vibe → prefer HARD offset shadows (sticker-style) over blur */
  --shadow-sticker-sm:   2px 2px 0 var(--culcat-black);
  --shadow-sticker:      4px 4px 0 var(--culcat-black);
  --shadow-sticker-lg:   6px 6px 0 var(--culcat-black);
  --shadow-soft:         0 4px 14px rgba(14,14,14,0.08);
  --shadow-card:         0 8px 24px rgba(14,14,14,0.10);

  /* ---------- SPACING ---------- */
  --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;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these instead of raw font-size where possible.
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1, .display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

h4, .h4, .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg2);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}

small, .caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--culcat-black); }

/* Utility classes */
.t-display   { font-family: var(--font-display); text-transform: uppercase; }
.t-mono      { font-family: var(--font-mono); }
.t-caps      { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.t-center    { text-align: center; }

/* =========================================================================
   TOKENS BỔ SUNG — thêm cho trang Tuyển dụng (/tuyen-dung), 2026-09
   Chỉ THÊM, không sửa giá trị nào đã có: colors_and_type.css dùng chung với
   trang Shop, đổi một token cũ là đổi cả giao diện shop đang chạy thật.
   ========================================================================= */
:root {
  /* Bố cục trang */
  --page-max:            1440px;
  --page-max-narrow:     1280px;
  --gutter:              28px;
  --gutter-mobile:       16px;
  --grid-gap:            22px;

  /* Chữ */
  --tracking-hero:       -0.02em;
  --tracking-caps-wide:  0.12em;
  --font-weight-black:   800;
  /* Cỡ chữ co giãn theo bề ngang màn hình — dùng cho hero và tiêu đề mục */
  --fs-hero:             clamp(40px, 5.5vw, 78px);
  --fs-section:          clamp(26px, 3vw, 38px);

  /* Viền */
  --border-chip-width:   2.5px;
  --border-hairline-width: 2px;

  /* Bo góc dùng theo vai trò, đặt cạnh thang --radius-* thô ở trên */
  --radius-card:         18px;
  --radius-icon-btn:     12px;
  --radius-drawer:       24px;

  /* Bóng đổ — lấy đúng thang của bộ kit: 2/3/4/5/6/8, hover 5/6/7, nhấn 0.
     Mỗi cú hover dịch phần tử lên trái-trên 2px và dày thêm bóng — cú nảy
     đặc trưng của Culcat.

     MỘT ĐIỂM LỆCH: --shadow-sticker-sm ở trên là 2px (giá trị có sẵn của trang
     Shop) trong khi kit ghi 3px. Không sửa ở đây vì .brand-tag của trang Shop
     đang dùng nó; trang tuyển dụng khoá lại 3px trong phạm vi của nó
     (xem .careers-page trong css/careers.css). */
  --shadow-sticker-xs:   2px 2px 0 var(--culcat-black);
  --shadow-sticker-md:   5px 5px 0 var(--culcat-black);
  --shadow-sticker-xl:   8px 8px 0 var(--culcat-black);
  --shadow-hover-sm:     5px 5px 0 var(--culcat-black);
  --shadow-hover:        6px 6px 0 var(--culcat-black);
  --shadow-hover-lg:     7px 7px 0 var(--culcat-black);
  --shadow-pressed:      0 0 0 var(--culcat-black);
  /* Biến thể bóng đỏ — dành cho khối ảnh lớn và hộp thoại */
  --shadow-sticker-red:  6px 6px 0 var(--culcat-red);
  --shadow-hover-red:    8px 8px 0 var(--culcat-red);
  --shadow-soft:         0 4px 14px rgba(14, 14, 14, 0.08);
  --shadow-card:         0 8px 24px rgba(14, 14, 14, 0.10);

  /* Lớp phủ sau hộp thoại */
  --scrim:               rgba(14, 14, 14, 0.5);
  --scrim-strong:        rgba(14, 14, 14, 0.82);

  /* Chuyển động */
  --ease-bounce:         cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce-soft:    cubic-bezier(.34, 1.2, .64, 1);
  --dur-instant:         .12s;
  --dur-fast:            .15s;
  --dur-med:             .18s;
  --dur-slow:            .28s;
  --lift-2:              -2px;
  --transition-card:     transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med);
  --transition-lift:     transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
}

/* Gạch chân bút dạ vàng sau một chữ — dùng trên tiêu đề hero và tiêu đề mục */
.ink-mark { position: relative; color: var(--culcat-red); }
.ink-mark::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: var(--culcat-yellow);
}

/* Ink border utility — recurring heavy-border look */
.ink-border  { border: var(--border-heavy-width) solid var(--culcat-black); }
.ink-card    {
  border: var(--border-heavy-width) solid var(--culcat-black);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sticker);
}