/* ============================================================
   Gojob Design System — Core tokens
   Colors + typography derived from the FOG Figma source of truth.
   ============================================================ */

/* Self-hosted Montserrat (brand fonts shipped in fonts/) */
@font-face { font-family: "Montserrat"; font-weight: 100; font-style: normal; src: url("/fonts/Montserrat-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 100; font-style: italic; src: url("/fonts/Montserrat-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 200; font-style: normal; src: url("/fonts/Montserrat-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 200; font-style: italic; src: url("/fonts/Montserrat-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; src: url("/fonts/Montserrat-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: italic; src: url("/fonts/Montserrat-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; src: url("/fonts/Montserrat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic; src: url("/fonts/Montserrat-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; src: url("/fonts/Montserrat-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: italic; src: url("/fonts/Montserrat-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: italic; src: url("/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; src: url("/fonts/Montserrat-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: italic; src: url("/fonts/Montserrat-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; src: url("/fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: italic; src: url("/fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal; src: url("/fonts/Montserrat-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: italic; src: url("/fonts/Montserrat-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------- Brand ---------- */
  --gj-blue:            rgb(1, 82, 199);     /* primary */
  --gj-blue-600:        rgb(0, 110, 255);    /* hover / loud variant */
  --gj-blue-700:        rgb(0, 59, 255);     /* pressed / decorative */
  --gj-blue-tint:       rgb(223, 233, 248);  /* hero card surface */
  --gj-blue-tint-soft:  rgb(237, 243, 252);  /* app backdrop */
  --gj-blue-shadow:     rgba(1, 82, 199, 0.3);

  --gj-yellow:          rgb(255, 211, 54);
  --gj-yellow-500:      rgb(255, 221, 30);   /* logo brand yellow */
  --gj-cream:           rgb(250, 246, 230);  /* warning surface */

  /* ---------- Neutrals ---------- */
  --gj-ink:             rgb(29, 29, 31);     /* fg-primary */
  --gj-ink-2:           rgb(37, 41, 45);     /* fg on dark */
  --gj-ink-3:           rgb(62, 62, 66);     /* fg-secondary */
  --gj-ink-muted:       rgb(152, 152, 158);  /* placeholder, tertiary */
  --gj-divider:         rgb(183, 184, 189);  /* subtle dividers */
  --gj-border:          rgb(227, 227, 229);  /* input / card border */
  --gj-border-soft:     rgb(238, 238, 240);
  --gj-border-cool:     rgb(222, 223, 235);
  --gj-white:           rgb(255, 255, 255);
  --gj-shadow-navy:     rgba(0, 21, 41, 0.05);
  --gj-shadow-navy-2:   rgba(0, 21, 41, 0.2);
  --gj-shadow-navy-3:   rgba(0, 21, 41, 0.1);

  /* ---------- Semantic ---------- */
  --gj-success:         rgb(6, 167, 125);
  --gj-success-bg:      rgb(235, 242, 240);
  --gj-success-fg:      rgb(6, 89, 68);
  --gj-success-shadow:  rgba(0, 203, 135, 0.2);

  --gj-danger:          rgb(232, 72, 85);
  --gj-danger-bg:       rgb(250, 237, 238);
  --gj-danger-loud:     rgb(255, 45, 85);

  --gj-warning-fg:      rgb(188, 68, 0);
  --gj-warning-bg:      var(--gj-cream);

  --gj-info:            rgb(112, 221, 255);
  --gj-info-teal:       rgba(113, 255, 227, 0.8);
  --gj-purple:          rgb(151, 71, 255);   /* design-system stroke accent */
  --gj-purple-soft:     rgb(164, 100, 255);

  /* ---------- Radius ---------- */
  --gj-r-xs:   3px;    /* fine details */
  --gj-r-sm:   6px;    /* chips */
  --gj-r-md:   12px;   /* cards, inputs, toasts */
  --gj-r-lg:   24px;   /* hero / large surfaces */
  --gj-r-full: 999px;  /* buttons, pills, avatars */

  /* ---------- Spacing (base 3) ---------- */
  --gj-s-1:  3px;
  --gj-s-2:  6px;
  --gj-s-3:  12px;
  --gj-s-4:  18px;
  --gj-s-5:  24px;
  --gj-s-6:  36px;
  --gj-s-7:  45px;
  --gj-s-8:  60px;

  /* ---------- Elevation ----------
     NOTE: the default UI vocabulary is a 1px stroke border (var(--gj-border)).
     Shadows are used ONLY for: (a) promoted focus glow on a single active
     action inside a hero, (b) toasts / transient notifications, and
     (c) fixed chrome (bottom nav) where an upward shadow separates content.
     Don't default to elev-1/2 for ordinary cards — use a border.          */
  --gj-elev-nav:   0 -2px 8px 0 var(--gj-shadow-navy);                 /* bottom nav only */
  --gj-elev-focus: 0 0 16px 0 var(--gj-blue-shadow);                   /* promoted action */
  --gj-elev-toast: 0 4px 8px 0 var(--gj-success-shadow), 0 1px 4px 0 rgba(0, 203, 135, 0.1);

  /* ---------- Typography ---------- */
  --gj-font-sans: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gj-font-display: "Montserrat", system-ui, sans-serif;

  /* fg roles */
  --fg-1: var(--gj-ink);
  --fg-2: var(--gj-ink-3);
  --fg-3: var(--gj-ink-muted);
  --fg-on-blue: var(--gj-white);
}

/* ============================================================
   Type specimens — role-based semantic classes.
   Sizes come directly from the Figma metadata (top usage).
   ============================================================ */

.gj-display {       /* hero on cover/header — 60px bold */
  font-family: var(--gj-font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.01em;
  color: var(--gj-white);
}

.gj-h1 {            /* large page title — 36px regular */
  font-family: var(--gj-font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: var(--fg-1);
}

.gj-h2 {            /* section headline — 24px bold */
  font-family: var(--gj-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 120%;
  color: var(--fg-1);
}

.gj-h3 {            /* card title / tab — 18px bold */
  font-family: var(--gj-font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--fg-1);
}

.gj-body-lg {       /* 16px body — default */
  font-family: var(--gj-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--fg-1);
}

.gj-body {          /* 14px body / subtitle */
  font-family: var(--gj-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-2);
}

.gj-label {         /* 14px label semibold/bold */
  font-family: var(--gj-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  color: var(--fg-2);
}

.gj-button-text {   /* button label — 16px 700 */
  font-family: var(--gj-font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
}

.gj-caption {       /* 12px caption / chip */
  font-family: var(--gj-font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-3);
}

.gj-caption-xs {    /* 9px micro — legal, counters */
  font-family: var(--gj-font-sans);
  font-weight: 500;
  font-size: 9px;
  line-height: 12px;
  color: var(--fg-3);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--gj-blue-tint-soft);
  color: var(--gj-ink);
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
}