/**
 * Expanso Brand Typography
 * Generated from brand.expanso.io
 *
 * Primary: Figtree (geometric sans, open source - use everywhere)
 * Secondary: Signifier (commercial license - Expanso corporate only, NOT Bacalhau)
 *
 * Usage:
 *   @import url('typography.css');
 *   or <link rel="stylesheet" href="typography.css">
 */

/* ============================================
   FONT IMPORTS
   ============================================ */

/* Figtree - Primary font (Google Fonts)
   Designer: Erik Kennedy
   Clean, yet friendly sans serif - minimalist but not stiff, casual but not silly
   Characteristic forms: t, f, y with unabashed curves */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
 * Signifier - Secondary font (Commercial License Required)
 * Designer: Kris Sowersby (Klim Type Foundry)
 * Brutalist response to 17th century Fell Types
 *
 * LICENSE (Current):
 *   - Desktop: 20 users
 *   - Web: 320,000 monthly unique users
 *   - Advertisement: 320,000 monthly impressions
 *
 * WARNING: Cannot be used in Bacalhau/Open Source projects!
 *
 * Uncomment and update paths after licensing:
 *
 * @font-face {
 *   font-family: 'Signifier';
 *   src: url('./fonts/Signifier-Light.woff2') format('woff2');
 *   font-weight: 300;
 *   font-style: normal;
 *   font-display: swap;
 * }
 * @font-face {
 *   font-family: 'Signifier';
 *   src: url('./fonts/Signifier-Regular.woff2') format('woff2');
 *   font-weight: 400;
 *   font-style: normal;
 *   font-display: swap;
 * }
 * @font-face {
 *   font-family: 'Signifier';
 *   src: url('./fonts/Signifier-Medium.woff2') format('woff2');
 *   font-weight: 500;
 *   font-style: normal;
 *   font-display: swap;
 * }
 */

:root {
  /* ============================================
     FONT FAMILIES
     ============================================ */
  --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Signifier', Georgia, 'Times New Roman', serif;

  /* Bacalhau/Open Source - Figtree only (mandatory) */
  --font-bacalhau: var(--font-primary);

  /* ============================================
     FONT WEIGHTS
     ============================================ */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* Use for emphasis, headers */
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ============================================
     TYPE SCALE (1.25 ratio - Major Third)
     ============================================ */
  --text-xs:   0.64rem;   /* 10.24px - source text in charts */
  --text-sm:   0.8rem;    /* 12.8px - subtitles, axis labels */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px - chart titles */
  --text-xl:   1.563rem;  /* 25px */
  --text-2xl:  1.953rem;  /* 31.25px */
  --text-3xl:  2.441rem;  /* 39px */
  --text-4xl:  3.052rem;  /* 48.8px */
  --text-5xl:  3.815rem;  /* 61px */
  --text-6xl:  4.768rem;  /* 76.3px */

  /* Chart-specific sizes (from brand guide) */
  --text-chart-title: 20px;
  --text-chart-subtitle: 12px;
  --text-chart-label: 12px;
  --text-chart-source: 10px;

  /* ============================================
     LINE HEIGHTS
     ============================================ */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ============================================
     LETTER SPACING
     ============================================ */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   HEADING PRESETS
   Use Figtree Semibold for emphasis
   ============================================ */
.heading-1,
h1 {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

.heading-3,
h3 {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.heading-4,
h4 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.heading-5,
h5 {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

.heading-6,
h6 {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */
.text-emphasis {
  font-weight: var(--font-weight-semibold);
}

.text-muted {
  color: var(--color-text-muted, #727272);
}

.text-secondary {
  color: var(--color-text-secondary, #9F9F9F);
}

.text-small {
  font-size: var(--text-sm);
}

.text-large {
  font-size: var(--text-lg);
}

/* ============================================
   SIGNIFIER (Corporate/Formal Use Only)
   NOT for Bacalhau or open source projects
   Recommended weight: Light (300)
   ============================================ */
.font-formal {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-light);
}

.heading-formal {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-tight);
}

/* ============================================
   BACALHAU / OPEN SOURCE
   Figtree-only styling (mandatory per license)
   ============================================ */
.bacalhau-text,
.oss-text {
  font-family: var(--font-bacalhau) !important;
}

/* ============================================
   DATA VISUALIZATION TYPOGRAPHY
   Per brand guidelines
   ============================================ */
.chart-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-chart-title);
  color: var(--grey-900, #000000);
}

.chart-subtitle {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-chart-subtitle);
  color: var(--grey-900, #000000);
}

.chart-label {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-chart-label);
  color: var(--grey-600, #9F9F9F);
}

.chart-source {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-chart-source);
  color: var(--grey-900, #000000);
}

/* ============================================
   LIST ITEM HEADERS
   Use Figtree Semibold per brand guide
   ============================================ */
.list-header,
dt {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
}

/* Secondary section titles */
.section-title-secondary {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
}