/* ============================================================
   PYEK FINANCIAL — Global CSS
   Brand: Pyek Financial Brand Guidelines + Bartlet Persona
   Font: Inter (headings), Arial (body)
   Version: 1.0
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* --- Brand Colors (Primary) --- */
  --color-navy:          #1A2D50;
  --color-blue:          #0081B9;
  --color-teal:          #0071AE;
  --color-ice-blue:      #7ACCED;
  --color-white:         #FFFFFF;
  --color-black:         #000000;

  /* --- Surface & Background --- */
  --color-bg:            #FFFFFF;
  --color-surface:       #F8F7F5;   /* Warm gray — Bartlet: warm, never clinical */
  --color-surface-alt:   #F0EFEC;   /* Slightly deeper warm gray for layering */

  /* --- Text --- */
  --color-text:          #2A2A2A;   /* Charcoal — primary body text */
  --color-text-secondary:#5A6577;   /* Slate — subheadings, captions */
  --color-text-muted:    #8C94A1;   /* Light slate — metadata, timestamps */
  --color-text-inverse:  #FFFFFF;   /* White text on dark backgrounds */

  /* --- Accent --- */
  --color-accent:        #6B2D3E;   /* Espresso/Oxblood — per Bartlet palette */

  /* --- Interactive --- */
  --color-link:          #0081B9;
  --color-link-hover:    #0071AE;
  --color-cta:           #0081B9;
  --color-cta-hover:     #006A9E;
  --color-cta-text:      #FFFFFF;

  /* --- Borders & Dividers --- */
  --color-border:        #E2E0DB;   /* Warm border — not cold gray */
  --color-border-light:  #EEEDEA;
  --color-divider:       #D6D4CF;

  /* --- Shadows (subtle, warm) --- */
  --shadow-sm:           0 1px 3px rgba(26, 45, 80, 0.06), 0 1px 2px rgba(26, 45, 80, 0.04);
  --shadow-md:           0 4px 12px rgba(26, 45, 80, 0.08), 0 2px 4px rgba(26, 45, 80, 0.04);
  --shadow-lg:           0 12px 32px rgba(26, 45, 80, 0.10), 0 4px 8px rgba(26, 45, 80, 0.04);

  /* --- Typography --- */
  --font-heading:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:           Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --text-h1:             clamp(2.25rem, 4vw, 3rem);       /* 36–48px */
  --text-h2:             clamp(1.625rem, 3vw, 2rem);      /* 26–32px */
  --text-h3:             clamp(1.25rem, 2.2vw, 1.5rem);   /* 20–24px */
  --text-h4:             clamp(1.1rem, 1.8vw, 1.25rem);   /* ~18–20px */
  --text-body:           1.0625rem;                         /* 17px */
  --text-body-lg:        1.125rem;                          /* 18px */
  --text-small:          0.875rem;                          /* 14px */
  --text-xs:             0.8125rem;                         /* 13px */

  --leading-tight:       1.3;
  --leading-normal:      1.65;
  --leading-relaxed:     1.8;

  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.02em;
  --tracking-caps:       0.08em;

  /* --- Spacing Scale --- */
  --space-xs:            0.25rem;   /* 4px */
  --space-sm:            0.5rem;    /* 8px */
  --space-md:            1rem;      /* 16px */
  --space-lg:            1.5rem;    /* 24px */
  --space-xl:            2rem;      /* 32px */
  --space-2xl:           3rem;      /* 48px */
  --space-3xl:           4rem;      /* 64px */
  --space-4xl:           6rem;      /* 96px */
  --space-5xl:           8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:       1200px;
  --container-narrow:    860px;
  --container-wide:      1400px;
  --gutter:              1.5rem;    /* 24px */

  /* --- Border Radius --- */
  --radius-sm:           4px;
  --radius-md:           6px;
  --radius-lg:           8px;

  /* --- Transitions --- */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;               /* 16px base */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-link-hover);
}

ul, ol {
  list-style: none;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

h4 {
  font-size: var(--text-h4);
  font-weight: 600;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  line-height: var(--leading-normal);
}

/* Subheading / lead text */
.lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 680px;
}

/* Small / caption text */
.text-small {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.text-xs {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Overline / label style (e.g., "FRACTIONAL CFO") */
.overline {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
}

/* Strong emphasis */
strong, b {
  font-weight: 700;
}

/* Block quotes — Bartlet-style: authoritative, not decorative */
blockquote {
  border-left: 3px solid var(--color-blue);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
blockquote p {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-navy);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}


/* ============================================================
   LAYOUT — Container System
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}


/* ============================================================
   SECTIONS — Alternating Backgrounds
   ============================================================ */
.section {
  padding: var(--space-4xl) 0;
}

.section--surface {
  background-color: var(--color-surface);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-text-inverse);
}
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--color-white);
}
.section--navy p {
  color: rgba(255, 255, 255, 0.85);
}
.section--navy .overline {
  color: var(--color-ice-blue);
}
.section--navy a {
  color: var(--color-ice-blue);
}
.section--navy a:hover {
  color: var(--color-white);
}


/* ============================================================
   GRID SYSTEM — Simple Flexbox Grid
   ============================================================ */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

.grid--2 > * { flex: 1 1 calc(50% - var(--gutter)); min-width: 280px; }
.grid--3 > * { flex: 1 1 calc(33.333% - var(--gutter)); min-width: 260px; }
.grid--4 > * { flex: 1 1 calc(25% - var(--gutter)); min-width: 220px; }


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Display */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing helpers */
.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Width constraint */
.max-w-narrow { max-width: var(--container-narrow); }
.max-w-prose  { max-width: 680px; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet (768px) */
@media (max-width: 768px) {
  :root {
    --gutter: 1.25rem;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .grid--2 > *,
  .grid--3 > *,
  .grid--4 > * {
    flex: 1 1 100%;
  }

  h1 { margin-bottom: var(--space-md); }
  h2 { margin-top: var(--space-2xl); }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  :root {
    --gutter: 1rem;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  body {
    font-size: 1rem; /* 16px on mobile */
  }
}


/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  body {
    color: #000;
    background: #fff;
  }
  .section--navy {
    background: #fff;
    color: #000;
  }
  a { color: #000; text-decoration: underline; }
}