/* ============================================================
   NOMAD BLUEPRINTS — Design Tokens
   colors_and_type.css
   ============================================================ */

/* @import MUST come before any other rules (e.g. @font-face) or the browser ignores it */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/JosefinSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Share Tech Mono';
  src: url('fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   BASE COLOR PALETTE
───────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --color-midnight-blue:   #0C447C;
  --color-turquoise:       #5CE1E6;
  --color-bright-green:    #4CA626;
  --color-forest-green:    #0F6E56;
  --color-sand:            #C4A882;
  --color-cream:           #FAF6F0;
  --color-white:           #FFFFFF;

  /* Extended shades */
  --color-midnight-blue-dark:   #083460;
  --color-midnight-blue-light:  #1a5fa0;
  --color-midnight-blue-subtle: rgba(12, 68, 124, 0.08);
  --color-turquoise-dark:       #3bbfc4;
  --color-turquoise-light:      #a8f0f2;
  --color-bright-green-dark:    #3a8f1e;
  --color-sand-light:           #e8d9c6;
  --color-sand-dark:            #a08060;
  --color-cream-dark:           #ede8df;

  /* Neutral grays */
  --color-gray-50:   #f9f9f9;
  --color-gray-100:  #f0f0f0;
  --color-gray-200:  #e0e0e0;
  --color-gray-300:  #c8c8c8;
  --color-gray-400:  #a0a0a0;
  --color-gray-500:  #707070;
  --color-gray-700:  #404040;
  --color-gray-900:  #1a1a2e;

  /* ─────────────────────────────────────────────
     SEMANTIC COLOR TOKENS
  ───────────────────────────────────────────── */

  /* Foreground */
  --fg-primary:     var(--color-gray-900);     /* Main body text */
  --fg-secondary:   var(--color-gray-500);     /* Subtext, captions */
  --fg-muted:       var(--color-gray-400);     /* Placeholders, disabled */
  --fg-inverse:     var(--color-white);        /* Text on dark backgrounds */
  --fg-accent:      var(--color-midnight-blue);/* Highlighted text */
  --fg-link:        var(--color-midnight-blue);
  --fg-link-hover:  var(--color-turquoise-dark);

  /* Background */
  --bg-primary:     var(--color-white);
  --bg-warm:        var(--color-cream);
  --bg-dark:        var(--color-midnight-blue);
  --bg-subtle:      var(--color-gray-50);
  --bg-blueprint:   var(--color-midnight-blue-subtle);

  /* Brand accents */
  --accent-primary:   var(--color-midnight-blue);
  --accent-secondary: var(--color-turquoise);
  --accent-green:     var(--color-bright-green);
  --accent-forest:    var(--color-forest-green);
  --accent-sand:      var(--color-sand);

  /* Interactive */
  --btn-primary-bg:       var(--color-midnight-blue);
  --btn-primary-bg-hover: var(--color-midnight-blue-dark);
  --btn-primary-fg:       var(--color-white);
  --btn-secondary-bg:     transparent;
  --btn-secondary-border: var(--color-midnight-blue);
  --btn-secondary-fg:     var(--color-midnight-blue);
  --btn-accent-bg:        var(--color-turquoise);
  --btn-accent-fg:        var(--color-midnight-blue);

  /* Borders */
  --border-subtle:    rgba(12, 68, 124, 0.12);
  --border-medium:    rgba(12, 68, 124, 0.25);
  --border-strong:    var(--color-midnight-blue);
  --border-white:     #ffffff;
  --border-blueprint: rgba(12, 68, 124, 0.15);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────── */

  /* Font families */
  --font-display:  'Josefin Sans', sans-serif;  /* Logo wordmark, display headings */
  --font-body:     'DM Sans', sans-serif;    /* UI, body copy, headings */
  --font-mono:     'Share Tech Mono', monospace; /* Blueprint labels, coords */

  /* Font weights */
  --fw-regular:    400; /* @kind font */
  --fw-medium:     500; /* @kind font */
  --fw-semibold:   600; /* @kind font */
  --fw-bold:       700; /* @kind font */
  --fw-extrabold:  800; /* @kind font */
  --fw-black:      900; /* @kind font */

  /* Font size scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  /* Line heights */
  --lh-tight:   1.2; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */
  --lh-loose:   1.8; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-wide:     0.05em; /* @kind font */
  --ls-wider:    0.1em; /* @kind font */
  --ls-widest:   0.15em; /* @kind font */

  /* ─────────────────────────────────────────────
     SPACING SCALE (8px base unit)
  ───────────────────────────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* Section padding */
  --section-py: 96px;
  --section-px: 24px;
  --content-max-w: 1200px;

  /* ─────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────── */
  --radius-sm:   4px;   /* Chips, badges */
  --radius-md:   8px;   /* Cards, inputs */
  --radius-lg:  16px;   /* Large cards */
  --radius-full: 9999px; /* Pills, tags */

  /* ─────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(12, 68, 124, 0.08);
  --shadow-md:  0 2px 12px rgba(12, 68, 124, 0.10);
  --shadow-lg:  0 6px 24px rgba(12, 68, 124, 0.14);
  --shadow-xl:  0 12px 48px rgba(12, 68, 124, 0.18);

  /* ─────────────────────────────────────────────
     BLUEPRINT GRID (CSS background)
  ───────────────────────────────────────────── */
  --blueprint-grid-light: repeating-linear-gradient(
      rgba(12,68,124,0.06) 0px, rgba(12,68,124,0.06) 1px,
      transparent 1px, transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(12,68,124,0.06) 0px, rgba(12,68,124,0.06) 1px,
      transparent 1px, transparent 32px
    );  /* @kind color */

  --blueprint-grid-dark: repeating-linear-gradient(
      rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px,
      transparent 1px, transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px,
      transparent 1px, transparent 32px
    );  /* @kind color */

  /* ─────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────── */
  --transition-fast:   150ms ease; /* @kind other */
  --transition-base:   250ms ease; /* @kind other */
  --transition-slow:   400ms ease; /* @kind other */
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}

/* ─────────────────────────────────────────────
   SEMANTIC ELEMENT DEFAULTS
───────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-primary);
  background: var(--bg-primary);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-body);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-accent);
}

h2 {
  font-family: var(--font-body);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-accent);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-accent);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

/* Blueprint label / annotation style */
.label-blueprint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-midnight-blue);
  opacity: 0.6;
}

/* Section eyebrow label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-secondary);
}

/* Display wordmark style */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}