/* ============================================================
   Fore-Site — Design System Tokens
   Inspired by GitBook's visual language, adapted for Fore-Site
   Font: General Sans (Fontshare) — all weights
   ============================================================ */

/* ── Font Import ─────────────────────────────────────────── */
@font-face {
  font-family: 'Google Sans';
  src: url('https://d350r05x2cpd9x.cloudfront.net/fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('https://d350r05x2cpd9x.cloudfront.net/fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

/* ── Root Tokens ─────────────────────────────────────────── */
:root {

  /* ── Brand Colors ──────────────────────────────────────── */
  --color-primary:        #0047ba;   /* Fore-Site blue — CTAs, links, brand highlights */
  --color-primary-hover:  #003d9e;   /* Slightly darker blue for hover */
  --color-primary-pressed:#003285;   /* Darker blue for active/pressed */
  --color-primary-light:  #d4e2f8;   /* Very light blue for tinted backgrounds */
  --color-primary-subtle: #edf3fb;   /* Barely-there blue tint */


  /* ── Semantic / Safety Colors ───────────────────────────── */
  --color-success:        #22c55e;   /* Safe, resolved, compliant */
  --color-success-light:  #e1f8ec;
  --color-success-dark:   #15803d;

  --color-warning:        #f59e0b;   /* Caution, medium risk, pending */
  --color-warning-light:  #fef3c7;
  --color-warning-dark:   #b45309;

  --color-danger:         #ef4444;   /* Critical, high risk, incident */
  --color-danger-light:   #fee2e2;
  --color-danger-dark:    #b91c1c;

  --color-info:           #0047ba;   /* Informational — mirrors primary */
  --color-info-light:     #d4e2f8;

  /* ── Backgrounds ───────────────────────────────────────── */
  --color-bg:             #ffffff;   /* Primary canvas */
  --color-bg-secondary:   #efeeed;   /* Cards, alternating sections */
  --color-bg-tertiary:    #fafaf9;   /* Subtle surface, table rows */
  --color-bg-dark:        #1c1917;   /* Dark sections, footer */

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:           #1c1917;   /* Primary text (warm near-black) */
  --color-text-secondary: #374151;   /* Muted captions, descriptions */
  --color-text-tertiary:  #6b7280;   /* Placeholder, disabled */
  --color-text-inverse:   #ffffff;   /* On dark backgrounds */
  --color-text-link:      #0047ba;   /* Inline links */

  /* ── Borders & Dividers ────────────────────────────────── */
  --color-border:         #e5e5e5;   /* Default border */
  --color-border-light:   #fafaf9;   /* Subtle dividers */
  --color-border-focus:   #0047ba;   /* Focus rings */

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:         'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:            'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            'Geist Mono', 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  /* ── Type Scale ────────────────────────────────────────── */
  --text-display:         70px;    /* Hero headlines */
  --text-h1:              56px;    /* Page titles */
  --text-h2:              48px;    /* Section headings */
  --text-h3:              40px;    /* Sub-section headings */
  --text-h4:              30px;    /* Card titles, feature headings */
  --text-h5:              24px;    /* Small headings */
  --text-body-lg:         20px;    /* Lead paragraphs */
  --text-body:            18px;    /* Default body text */
  --text-small:           16px;    /* Secondary body, UI labels */
  --text-xs:              14px;    /* Captions, meta */
  --text-caption:         13px;    /* Fine print, timestamps */
  --text-micro:           11px;    /* Badges, status indicators */

  /* ── Font Weights ──────────────────────────────────────── */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ── Line Heights ──────────────────────────────────────── */
  --leading-tight:        1.0;     /* Display / heading */
  --leading-snug:         1.2;     /* Sub-headings */
  --leading-normal:       1.5;     /* Body text */
  --leading-relaxed:      1.6;     /* Long-form reading */

  /* ── Letter Spacing ────────────────────────────────────── */
  --tracking-tight:       -0.02em; /* Headings */
  --tracking-normal:      0;       /* Body */
  --tracking-wide:        0.05em;  /* Overlines, labels */

  /* ── Spacing Scale (10px base) ─────────────────────────── */
  --space-1:              2px;
  --space-2:              4px;
  --space-3:              6px;
  --space-4:              8px;
  --space-5:              10px;    /* Base unit */
  --space-6:              12px;
  --space-7:              16px;
  --space-8:              20px;
  --space-9:              24px;
  --space-10:             30px;
  --space-11:             40px;
  --space-12:             48px;
  --space-13:             60px;
  --space-14:             80px;
  --space-15:             100px;
  --space-16:             120px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-xs:            4px;
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           24px;
  --radius-pill:          100px;   /* Fully rounded buttons/badges */

  /* ── Shadows (chromatic-tinted) ────────────────────────── */
  --shadow-xs:            0px 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-sm:            0px 1px 3px rgba(28, 25, 23, 0.08), 0px 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md:            0px 4px 12px rgba(28, 25, 23, 0.10);
  --shadow-lg:            0px 8px 24px rgba(28, 25, 23, 0.10), 0px 2px 6px rgba(28, 25, 23, 0.05);
  --shadow-xl:            0px 12px 40px rgba(28, 25, 23, 0.12), 0px 4px 12px rgba(28, 25, 23, 0.06);
  --shadow-focus:         0 0 0 3px rgba(0, 71, 186, 0.3);  /* Focus ring */

  /* ── Transitions ───────────────────────────────────────── */
  --ease-default:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:             cubic-bezier(0, 0, 0.2, 1);
  --ease-in:              cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:        120ms;
  --duration-normal:      200ms;
  --duration-slow:        350ms;

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --z-base:               0;
  --z-raised:             10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width:            1200px;
  --max-width-narrow:     800px;
  --max-width-wide:       1440px;
}

/* ── Semantic Type Classes ────────────────────────────────── */

.display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

body, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}