/* ==========================================================================
   HireArt Design System — Colors, Type, and core foundations
   Source: @hireart/tokens (packages/tokens/src)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Euclid Circular A";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/euclid-circular-a-regular-web-xl.woff2") format("woff2"),
       url("./fonts/euclid-circular-a-regular-web-xl.woff") format("woff");
}
@font-face {
  font-family: "Euclid Circular A";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/euclid-circular-a-regular-italic-web-xl.woff2") format("woff2"),
       url("./fonts/euclid-circular-a-regular-italic-web-xl.woff") format("woff");
}
@font-face {
  font-family: "Euclid Circular A";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/euclid-circular-a-semibold-web-xl.woff2") format("woff2"),
       url("./fonts/euclid-circular-a-semibold-web-xl.woff") format("woff");
}
@font-face {
  font-family: "Euclid Circular A";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/euclid-circular-a-bold-web-xl.woff2") format("woff2"),
       url("./fonts/euclid-circular-a-bold-web-xl.woff") format("woff");
}
@font-face {
  font-family: "Degular Display";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/degular-display-bold.woff2") format("woff2"),
       url("./fonts/degular-display-bold.woff") format("woff");
}
@font-face {
  font-family: "Degular";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/degular-bold.woff2") format("woff2"),
       url("./fonts/degular-bold.woff") format("woff");
}

:root {
  /* ---------- Color: Neutral ---------- */
  --color-neutral-10: #FDFDFD;
  --color-neutral-20: #EBEBEB;
  --color-neutral-30: #CCCCCC;
  --color-neutral-40: #B8B8B8;
  --color-neutral-50: #A3A3A3;
  --color-neutral-60: #818181;
  --color-neutral-70: #707070;
  --color-neutral-80: #525252;
  --color-neutral-90: #333333;
  --color-neutral-100: #141414;

  /* ---------- Color: Green (success) ---------- */
  --color-green-20: #ECFEF6;
  --color-green-40: #8CF8C7;
  --color-green-60: #0DD57B;
  --color-green-80: #09864E;
  --color-green-100: #054D2C;

  /* ---------- Color: Blue (info) ---------- */
  --color-blue-20: #C5E8FC;
  --color-blue-40: #8BD0F9;
  --color-blue-60: #2EB2FF;
  --color-blue-80: #0972AE;
  --color-blue-100: #04334E;

  /* ---------- Color: Red (error / primary accent) ---------- */
  --color-red-20: #FEDDD7;
  --color-red-40: #FD8972;
  --color-red-60: #FC5130;   /* HireArt signature red-orange */
  --color-red-80: #C92403;
  --color-red-100: #641202;

  /* ---------- Color: Yellow (warning / accent) ---------- */
  --color-yellow-20: #FCEDC5;
  --color-yellow-40: #F9D677;
  --color-yellow-60: #F6C43C;
  --color-yellow-80: #C39109;
  --color-yellow-100: #614905;

  /* ---------- Color: Purple (brand accent) ---------- */
  --color-purple-20: #DFDDF8;
  --color-purple-40: #9F99EA;
  --color-purple-60: #493ED8;
  --color-purple-80: #271F98;
  --color-purple-100: #110E44;

  /* ---------- Semantic colors ---------- */
  --color-text-dark: var(--color-neutral-100);
  --color-text-default: var(--color-neutral-100);
  --color-text-muted: var(--color-neutral-70);
  --color-text-subtle: var(--color-neutral-60);
  --color-text-disabled: var(--color-neutral-50);
  --color-text-inverse: var(--color-neutral-10);

  --color-bg-default: var(--color-neutral-10);
  --color-bg-subtle: #F6F6F6;
  --color-bg-muted: var(--color-neutral-20);
  --color-bg-inverse: var(--color-neutral-100);

  --color-border-default: var(--color-neutral-100);     /* Borders are usually black */
  --color-border-subtle: var(--color-neutral-30);
  --color-border-muted: var(--color-neutral-20);

  --color-accent-brand: var(--color-red-60);            /* HireArt red-orange */
  --color-accent-success: var(--color-green-60);
  --color-accent-warning: var(--color-yellow-60);
  --color-accent-info: var(--color-blue-60);
  --color-accent-error: var(--color-red-60);

  /* ---------- Spacing scale ---------- */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 100px;

  /* ---------- Border widths ---------- */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;

  /* ---------- Elevation: chunky offset shadows (HireArt signature) ---------- */
  --elevation-none: none;
  --elevation-sm: 4px 4px 0 0 var(--color-neutral-100);
  --elevation-md: 8px 8px 0 0 var(--color-neutral-100);
  --elevation-lg: 12px 12px 0 0 var(--color-neutral-100);
  --elevation-xl: 16px 16px 0 0 var(--color-neutral-100);

  /* Button press shadows (shorter, flatter) */
  --elevation-button-sm: 0 2px 0 var(--color-neutral-100);
  --elevation-button-md: 0 3px 0 var(--color-neutral-100);
  --elevation-button-lg: 0 4px 0 var(--color-neutral-100);
  --elevation-button-xl: 0 5px 0 var(--color-neutral-100);

  /* ---------- Type: families ---------- */
  --font-body: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Degular Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headline: "Degular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", monospace;

  /* ---------- Type: sizes (px as defined) ---------- */
  --text-8: 8px;
  --text-11: 11px;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-40: 40px;
  --text-60: 60px;

  /* ---------- Type: weights ---------- */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Type: line heights ---------- */
  --lh-1: 1;
  --lh-2: 1.1;
  --lh-3: 1.25;
  --lh-4: 1.5;
  --lh-5: 2;

  /* ---------- Opacity scale ---------- */
  --opacity-12: 0.12;
  --opacity-16: 0.16;
  --opacity-24: 0.24;
  --opacity-32: 0.32;
  --opacity-48: 0.48;
  --opacity-64: 0.64;
  --opacity-80: 0.8;
}

/* ==========================================================================
   Semantic base styles — ready-to-use text classes matching token constants
   Mirrors @hireart/component-library typography constants exactly.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-16);
  line-height: var(--lh-4);
  font-weight: var(--weight-regular);
  color: var(--color-text-default);
  background: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* DISPLAY_1 — 60px bold, display family, lh 1.0 */
.display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-60);
  font-weight: var(--weight-bold);
  line-height: var(--lh-1);
  letter-spacing: 0.01em;
}

/* DISPLAY_2 — 40px bold, display family, lh 1.1 */
.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-40);
  font-weight: var(--weight-bold);
  line-height: var(--lh-2);
  letter-spacing: 0.01em;
}

/* HEADLINE_1 — 24px bold, headline family, lh 1.25 */
.headline-1, h1, h2 {
  font-family: var(--font-headline);
  font-size: var(--text-24);
  font-weight: var(--weight-bold);
  line-height: var(--lh-3);
  letter-spacing: 0.01em;
}

/* TITLE_1 — 20px regular, body family, lh 1.5 */
.title-1, h3 {
  font-family: var(--font-body);
  font-size: var(--text-20);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}

/* TITLE_2 — 18px regular, body family, lh 1.5 */
.title-2, h4 {
  font-family: var(--font-body);
  font-size: var(--text-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}

/* SUBTITLE_1 — 12px bold, uppercase, heavy tracking */
.subtitle-1, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-12);
  font-weight: var(--weight-bold);
  line-height: var(--lh-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* BODY_1 through BODY_5 — all body family, lh 1.5 */
.body-1, p {
  font-family: var(--font-body);
  font-size: var(--text-16);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}
.body-2 {
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}
.body-3 {
  font-family: var(--font-body);
  font-size: var(--text-12);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}
.body-4 {
  font-family: var(--font-body);
  font-size: var(--text-11);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}
.body-5 {
  font-family: var(--font-body);
  font-size: var(--text-8);
  font-weight: var(--weight-regular);
  line-height: var(--lh-4);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Utility classes frequently used alongside typography */
.text-dark { color: var(--color-text-default); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-inverse { color: var(--color-text-inverse); }
.text-brand { color: var(--color-accent-brand); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }