/* =========================================================
   Just Right! Destination Management — Design Tokens
   Colors + Type. Import into any HTML file.
   ========================================================= */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --------- BRAND COLORS (from brand guide) --------- */
  --jr-blue:        #225A85;   /* Primary accent — "R!GHT" */
  --jr-gray:        #757575;   /* Primary neutral — "JUST" */
  --jr-black:       #000000;
  --jr-white:       #FFFFFF;

  /* --------- EXTENDED PALETTE (harmonious with brand) --------- */
  --jr-blue-900:    #0F3A5A;   /* darker hover / nav */
  --jr-blue-800:    #174C72;
  --jr-blue-700:    #225A85;   /* = --jr-blue (default) */
  --jr-blue-500:    #3E79A3;
  --jr-blue-300:    #8DB1CB;
  --jr-blue-100:    #D9E6F0;
  --jr-blue-50:     #F1F6FA;

  --jr-gray-900:    #212121;
  --jr-gray-800:    #3D3D3D;
  --jr-gray-700:    #575757;
  --jr-gray-600:    #757575;   /* = --jr-gray (default) */
  --jr-gray-500:    #9A9A9A;
  --jr-gray-400:    #BDBDBD;
  --jr-gray-300:    #D8D8D8;
  --jr-gray-200:    #EAEAEA;
  --jr-gray-100:    #F3F3F3;
  --jr-gray-50:     #F9F9F9;

  /* --------- SEMANTIC (light mode) --------- */
  --fg-1:           var(--jr-gray-900);   /* headings, high-emphasis body */
  --fg-2:           var(--jr-gray-700);   /* body copy */
  --fg-3:           var(--jr-gray-600);   /* captions, secondary */
  --fg-4:           var(--jr-gray-500);   /* disabled, eyebrow labels */
  --fg-on-dark:     var(--jr-white);
  --fg-link:        var(--jr-blue-700);
  --fg-link-hover:  var(--jr-blue-900);
  --fg-accent:      var(--jr-blue-700);

  --bg-1:           var(--jr-white);      /* page */
  --bg-2:           var(--jr-gray-50);    /* subtle section */
  --bg-3:           var(--jr-gray-100);   /* cards on page */
  --bg-4:           var(--jr-blue-50);    /* tinted section */
  --bg-dark:        var(--jr-blue-900);   /* dark hero / footer */
  --bg-dark-alt:    var(--jr-gray-900);

  --border-1:       var(--jr-gray-200);   /* dividers */
  --border-2:       var(--jr-gray-300);   /* input borders */
  --border-strong:  var(--jr-gray-600);
  --border-accent:  var(--jr-blue-700);

  /* Status (kept near brand palette — no neon) */
  --status-success: #2F7A4B;
  --status-warning: #B4741B;
  --status-danger:  #A8362B;
  --status-info:    var(--jr-blue-700);

  /* --------- TYPE --------- */
  --font-sans:      "Raleway", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display:   "Raleway", system-ui, sans-serif;    /* Raleway Black for display */
  --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* weights — brand uses Medium (500) + Black (900) as the workhorse pair */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;   /* BRAND: body weight */
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;   /* BRAND: display weight */

  /* tracking — Raleway reads best with a touch of letter-spacing at display size */
  --tracking-display: 0.01em;
  --tracking-caps:    0.08em;  /* for eyebrow/caps, matches logo feel */
  --tracking-body:    0;

  /* line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Type scale (modular, 1.25) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  84px;

  /* --------- SPACING (4-pt base) --------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;
  --sp-11:  80px;
  --sp-12:  96px;
  --sp-13:  128px;

  /* --------- RADII --------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;      /* default (brand is squarish/architectural) */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* --------- ELEVATION --------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 58, 90, .08);
  --shadow-2: 0 2px 6px rgba(15, 58, 90, .10), 0 1px 2px rgba(15, 58, 90, .06);
  --shadow-3: 0 8px 20px rgba(15, 58, 90, .12), 0 2px 6px rgba(15, 58, 90, .08);
  --shadow-4: 0 18px 40px rgba(15, 58, 90, .18), 0 4px 10px rgba(15, 58, 90, .08);
  --shadow-focus: 0 0 0 3px rgba(34, 90, 133, .35);

  /* --------- MOTION --------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.68, 0.01);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;

  /* --------- LAYOUT --------- */
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 48px);
}

/* =========================================================
   Semantic element styles — opt in by using the class
   or by wrapping content in a .jr-prose container.
   ========================================================= */

.jr-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headline: Raleway Black, tight, slight tracking */
.jr-display, h1.jr-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.jr-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.jr-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.jr-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.jr-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.jr-h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Eyebrow / overline — the "NATIONWIDE DESTINATION MANAGEMENT"
   caps-tag feel from the logo */
.jr-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.jr-p, p.jr-p {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 68ch;
}

.jr-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 64ch;
}

.jr-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.jr-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

.jr-link {
  color: var(--fg-link);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-std);
}
.jr-link:hover { color: var(--fg-link-hover); }

/* The "Just Right!" logotype treatment rules — use sparingly.
   The word-mark itself (R!GHT with inverted ! as the i) is an
   image asset; this class styles surrounding "Just Right!" text
   to echo the logo when used inline. */
.jr-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.jr-wordmark em { font-style: normal; color: var(--jr-blue-700); }