/* ============================================================================
   DESIGN SYSTEM — hirehire v3
   Source: Figma → HireHire-v3 / ui kit
   File: https://www.figma.com/design/91DXIYV47TBp5qfmyijtWD/HireHire-v3
   
   Naming convention:
     CSS variable            ←→  Figma variable
     --color-{group}-{name}  ←→  {group}/{name}
     --font-{category}-{size}←→  {category}/{size}

   How to sync with Figma:
     1. Each variable below has a Figma reference comment
     2. When a token changes in Figma, update the corresponding variable
     3. All component styles reference these variables — changes propagate automatically
   ============================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {

  /* ══════════════════════════════════════════════════════════════════════════
     COLORS
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── Neutral ──────────────────────────────── Figma: neutral/{name} ────── */
  --color-neutral-black-900:    #1B1A1A;       /* neutral/black 900   */
  --color-neutral-gray-200:     #E8E8E8;       /* neutral/gray 200    */
  --color-neutral-white-50:     #FFFFFF;       /* neutral/white 50    */

  /* ── Violet ───────────────────────────────── Figma: violet/{name} ─────── */
  /* v3: violet was extracted from neutral group into its own group */
  --color-violet-violet-500:    #7A58FA;       /* violet/violet 500   */
  --color-violet-violet-200:    #E5E4ED;       /* violet/violet 200   */
  --color-violet-violet-100:    #F0EFF6;       /* violet/violet 100   */

  /* ── Alpha ────────────────────────────────── Figma: alpha/{name} ──────── */
  --color-alpha-black-900-90:   rgba(27, 26, 26, 0.9);   /* alpha/black 900 [90%] */
  --color-alpha-black-900-60:   rgba(27, 26, 26, 0.6);   /* alpha/black 900 [60%] */
  --color-alpha-black-900-10:   rgba(27, 26, 26, 0.1);   /* alpha/black 900 [10%] */
  --color-alpha-white-50-60:    rgba(255, 255, 255, 0.6); /* alpha/white 50 [60%]  */
  --color-alpha-white-50-30:    rgba(255, 255, 255, 0.3); /* alpha/white 50 [30%]  */

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     Font family: DM Sans (variable font)
     ══════════════════════════════════════════════════════════════════════════ */

  --font-family: 'DM Sans', sans-serif;

  /* ── Heading sizes ────────────────────────── Figma: heading/{size} ────── */
  --heading-64-size:            64px;          /* heading/64 */
  --heading-64-weight:          800;           /* ExtraBold  */
  --heading-64-line-height:     1.2;           /* 120%       */
  --heading-64-letter-spacing:  -0.02em;       /* -2%        */

  --heading-56-size:            56px;          /* heading/56 */
  --heading-56-weight:          800;           /* ExtraBold  */
  --heading-56-line-height:     1.2;           /* 120%       */
  --heading-56-letter-spacing:  -0.02em;       /* -2%        */

  --heading-40-size:            40px;          /* heading/40 */
  --heading-40-weight:          700;           /* Bold       */
  --heading-40-line-height:     1.3;           /* 130%       */
  --heading-40-letter-spacing:  -0.02em;       /* -2%        */

  --heading-32-size:            32px;          /* heading/32 */
  --heading-32-weight:          700;           /* Bold       */
  --heading-32-line-height:     1.2;           /* 120%       */
  --heading-32-letter-spacing:  -0.02em;       /* -2%        */

  --heading-24-size:            24px;          /* heading/24 */
  --heading-24-weight:          600;           /* SemiBold   */
  --heading-24-line-height:     1.2;           /* 120%       */
  --heading-24-letter-spacing:  -0.02em;       /* -2%        */

  /* ── H3 ───────────────────────────────────── Figma: h3 24 (v3) ────────── */
  --h3-24-size:                 22px;          /* h3 24 (size 22, name 24) */
  --h3-24-weight:               600;           /* SemiBold   */
  --h3-24-line-height:          1.4;           /* 140%       */
  --h3-24-letter-spacing:       0;             /* 0          */

  /* ── Text sizes ───────────────────────────── Figma: text/{size} ───────── */
  --text-20-size:               20px;          /* text/20    */
  --text-20-weight:             600;           /* SemiBold   */
  --text-20-line-height:        1.4;           /* 140%       */
  --text-20-letter-spacing:     0;             /* 0          */

  --text-16-size:               16px;          /* text/16    */
  --text-16-weight:             600;           /* SemiBold   */
  --text-16-line-height:        1.4;           /* 140%       */
  --text-16-letter-spacing:     0;             /* 0          */

  --text-14-size:               14px;          /* text/14    */
  --text-14-weight:             600;           /* SemiBold   */
  --text-14-line-height:        1.4;           /* 140%       */
  --text-14-letter-spacing:     0;             /* 0          */

  /* ── Label sizes ──────────────────────────── Figma: label/{size} ──────── */
  --label-16b-size:             16px;          /* label/16 [b] */
  --label-16b-weight:           600;           /* SemiBold     */
  --label-16b-line-height:      1;             /* 100%         */
  --label-16b-letter-spacing:   0;             /* 0            */

  --label-14-size:              14px;          /* label/14   */
  --label-14-weight:            400;           /* Regular    */
  --label-14-line-height:       1;             /* 100%       */
  --label-14-letter-spacing:    0;             /* 0          */

  /* ══════════════════════════════════════════════════════════════════════════
     SPACING & LAYOUT
     Derived from component measurements in Figma UI Kit
     ══════════════════════════════════════════════════════════════════════════ */

  --radius-full:                999px;         /* buttons              */
  --radius-xl:                  32px;          /* cards, color chips   */
  --radius-lg:                  24px;          /* large cards          */
  --radius-md:                  16px;          /* medium elements      */
  --radius-sm:                  8px;           /* small elements       */

  /* ── Breakpoints (from header component resolutions) ──────────────────── */
  --breakpoint-desktop:         1440px;        /* resolution=1440 */
  --breakpoint-tablet:          768px;         /* resolution=768  */
  --breakpoint-mobile:          375px;         /* resolution=375  */

  /* ── Content width ────────────────────────────────────────────────────── */
  --content-max-width:          1180px;        /* from header content-wrapper */
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITY CLASSES
   Each class maps 1:1 to a Figma text style variable
   ════════════════════════════════════════════════════════════════════════════ */

.heading-64 {
  font-family: var(--font-family);
  font-size: var(--heading-64-size);
  font-weight: var(--heading-64-weight);
  line-height: var(--heading-64-line-height);
  letter-spacing: var(--heading-64-letter-spacing);
}

.heading-56 {
  font-family: var(--font-family);
  font-size: var(--heading-56-size);
  font-weight: var(--heading-56-weight);
  line-height: var(--heading-56-line-height);
  letter-spacing: var(--heading-56-letter-spacing);
}

.heading-40 {
  font-family: var(--font-family);
  font-size: var(--heading-40-size);
  font-weight: var(--heading-40-weight);
  line-height: var(--heading-40-line-height);
  letter-spacing: var(--heading-40-letter-spacing);
}

.heading-32 {
  font-family: var(--font-family);
  font-size: var(--heading-32-size);
  font-weight: var(--heading-32-weight);
  line-height: var(--heading-32-line-height);
  letter-spacing: var(--heading-32-letter-spacing);
}

.heading-24 {
  font-family: var(--font-family);
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
}

.h3-24 {
  font-family: var(--font-family);
  font-size: var(--h3-24-size);
  font-weight: var(--h3-24-weight);
  line-height: var(--h3-24-line-height);
  letter-spacing: var(--h3-24-letter-spacing);
}

.text-20 {
  font-family: var(--font-family);
  font-size: var(--text-20-size);
  font-weight: var(--text-20-weight);
  line-height: var(--text-20-line-height);
  letter-spacing: var(--text-20-letter-spacing);
}

.text-16 {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  letter-spacing: var(--text-16-letter-spacing);
}

.text-14 {
  font-family: var(--font-family);
  font-size: var(--text-14-size);
  font-weight: var(--text-14-weight);
  line-height: var(--text-14-line-height);
  letter-spacing: var(--text-14-letter-spacing);
}

.label-16b {
  font-family: var(--font-family);
  font-size: var(--label-16b-size);
  font-weight: var(--label-16b-weight);
  line-height: var(--label-16b-line-height);
  letter-spacing: var(--label-16b-letter-spacing);
}

.label-14 {
  font-family: var(--font-family);
  font-size: var(--label-14-size);
  font-weight: var(--label-14-weight);
  line-height: var(--label-14-line-height);
  letter-spacing: var(--label-14-letter-spacing);
}