/* ============================================================
   JOB SOLUTIONS — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Playfair+Display:ital,wght@0,700;1,400;1,700&display=swap');

/* ────────────────────────────────
   BASE COLOR TOKENS
──────────────────────────────── */
:root {
  /* Brand Navy */
  --navy:        #1A2744;
  --navy-deep:   #0F1A30;
  --navy-mid:    #1E3158;
  --navy-light:  #2B4070;

  /* Brand Gold */
  --gold:        #C4973A;
  --gold-light:  #D4A84A;
  --gold-dark:   #9E7A28;
  --gold-pale:   #EDD89A;

  /* Backgrounds */
  --bg-white:    #FFFFFF;
  --bg-cream:    #F5EDD8;
  --bg-gray:     #EEF1F6;
  --bg-dark:     #1A2744;
  --bg-black:    #111111;

  /* Text */
  --text-dark:   #1A2744;
  --text-body:   #3D3D3D;
  --text-muted:  #6B7280;
  --text-light:  #FFFFFF;
  --text-gold:   #C4973A;

  /* Borders */
  --border:      #D1D5DB;
  --border-navy: #1A2744;
  --border-gold: #C4973A;

  /* ────────────────────────────────
     SEMANTIC COLOR TOKENS
  ──────────────────────────────── */
  --color-primary:         var(--navy);
  --color-primary-light:   var(--navy-light);
  --color-accent:          var(--gold);
  --color-accent-light:    var(--gold-light);
  --color-surface:         var(--bg-white);
  --color-surface-alt:     var(--bg-gray);
  --color-surface-warm:    var(--bg-cream);
  --color-surface-dark:    var(--bg-dark);
  --color-fg:              var(--text-dark);
  --color-fg-muted:        var(--text-muted);
  --color-fg-inverse:      var(--text-light);

  /* ────────────────────────────────
     TYPOGRAPHY
  ──────────────────────────────── */
  --font-sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Scale */
  --text-xs:     0.6875rem;   /* 11px */
  --text-sm:     0.8125rem;   /* 13px */
  --text-base:   1rem;        /* 16px */
  --text-md:     1.125rem;    /* 18px */
  --text-lg:     1.375rem;    /* 22px */
  --text-xl:     1.75rem;     /* 28px */
  --text-2xl:    2.25rem;     /* 36px */
  --text-3xl:    3rem;        /* 48px */
  --text-4xl:    4rem;        /* 64px */
  --text-5xl:    5.5rem;      /* 88px */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.18em;

  /* ────────────────────────────────
     SPACING SCALE
  ──────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ────────────────────────────────
     BORDER RADIUS
  ──────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* ────────────────────────────────
     SHADOWS
  ──────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(10, 20, 50, 0.08);
  --shadow-md:   0 4px 16px rgba(10, 20, 50, 0.12);
  --shadow-lg:   0 8px 32px rgba(10, 20, 50, 0.16);

  /* ────────────────────────────────
     DIVIDERS
  ──────────────────────────────── */
  --rule-gold:   1px solid var(--gold);
  --rule-navy:   1px solid var(--navy);
  --rule-light:  1px solid rgba(255,255,255,0.2);
  --rule-border: 1px solid var(--border);
}

/* ────────────────────────────────
   SEMANTIC TYPE ELEMENTS
──────────────────────────────── */

/* Display — Slide main titles */
.display,
h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-dark);
}

/* Heading 2 */
h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--text-dark);
}

/* Heading 3 */
h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--text-dark);
}

/* Body copy */
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Label — small caps category marker */
.label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gold);
}

/* Quote / Bible verse */
blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Caption / footnote */
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
}