/* ==========================================================================
   Kopek International — Foundations
   Colors, type and semantic variables for all branded artifacts.
   ========================================================================== */

/* Brand headings and body fonts are self-hosted for deterministic rendering. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ----------------------------------------------------------------------
     PRIMARY PALETTE — layout, structure, brand surfaces
     ---------------------------------------------------------------------- */
  --brand-primary:        #0B4E52;   /* Deep teal — headers, primary fills, body links */
  --brand-primary-hover:  #0E6065;   /* Slightly lighter teal for filled interactive states */
  --brand-accent:         #B68A52;   /* Warm brass — small emphasis, rules and selected states */
  --brand-accent-hover:   #9B7443;   /* Darker brass — text and rule hover states */
  --brand-accent-text:    #76552E;   /* Readable brass for small text on light surfaces */
  --brand-secondary:      #ECF1F1;   /* Light grey-white — bg, table stripes */
  --brand-secondary-2:    #F6F8F8;   /* Even lighter neutral surface */

  /* Text */
  --text-primary:         #1A1A1A;   /* Body */
  --text-muted:           #59616B;   /* Captions, labels, helper */
  --text-subtle:          #9CA3AF;   /* Disabled, very low emphasis */
  --text-on-brand:        #FFFFFF;   /* Text on teal surfaces */

  /* Surfaces */
  --surface:              #FFFFFF;
  --surface-alt:          #ECF1F1;
  --surface-tint:         #F6F8F8;
  --border:               #E2E7E7;   /* Hairline divider, derived from secondary */
  --border-strong:        #D1D5DB;
  --border-brand:         #0B4E52;

  /* Status (derived from tertiary palette where applicable) */
  --status-success:       #209B6E;
  --status-success-soft:  #3CC192;
  --status-warning:       #C97B1A;
  --status-danger:        #B23A3A;
  --status-info:          #004EB7;

  /* ----------------------------------------------------------------------
     TERTIARY PALETTE — charts and data viz ONLY (never structural)
     Each color exposed as accent / muted pair.
     ---------------------------------------------------------------------- */
  --chart-navy:        #06215C;  --chart-navy-soft:        #1F418A;
  --chart-blue:        #004EB7;  --chart-blue-soft:        #2B6EC9;
  --chart-cyan:        #01C2FF;  --chart-cyan-soft:        #52CDFF;
  --chart-violet:      #BC49DA;  --chart-violet-soft:      #E86AF9;
  --chart-purple:      #6C43DF;  --chart-purple-soft:      #9F80FE;
  --chart-steel:       #4472C7;  --chart-steel-soft:       #6DA4F5;
  --chart-green:       #209B6E;  --chart-green-soft:       #3CC192;
  --chart-lime:        #ADE19B;  --chart-lime-soft:        #CAFEB5;
  --chart-slate:       #344756;  --chart-slate-soft:       #3D5B72;
  --chart-slate-blue:  #3F6695;  --chart-slate-blue-soft:  #5D7DA4;
  --chart-sky:         #90BBD5;  --chart-sky-soft:         #A5C6DA;
  --chart-pale-blue:   #ABC6E4;  --chart-pale-blue-soft:   #C6D9EE;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (rem-based, 16px root) */
  --fs-display:   2.625rem;  /* 42px — cover titles */
  --fs-h1:        2rem;      /* 32px */
  --fs-h2:        1.5rem;    /* 24px */
  --fs-h3:        1.25rem;   /* 20px */
  --fs-h4:        1.0625rem; /* 17px */
  --fs-body:      1rem;      /* 16px */
  --fs-body-sm:   0.9375rem; /* 15px */
  --fs-caption:   0.8125rem; /* 13px */
  --fs-micro:     0.6875rem; /* 11px — table headers, eyebrows */

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;   /* uppercase labels */

  /* ----------------------------------------------------------------------
     SPACING — 4-pt rhythm
     ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------------------
     RADII — clinical, restrained
     ---------------------------------------------------------------------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     ELEVATION — soft, paper-like, never glossy
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(11,78,82,0.04);
  --shadow-sm: 0 1px 2px rgba(11,78,82,0.06), 0 1px 1px rgba(11,78,82,0.04);
  --shadow-md: 0 4px 12px rgba(11,78,82,0.08), 0 1px 2px rgba(11,78,82,0.05);
  --shadow-lg: 0 12px 32px rgba(11,78,82,0.10), 0 2px 6px rgba(11,78,82,0.06);
  --shadow-focus: 0 0 0 3px rgba(182,138,82,0.32);

  /* ----------------------------------------------------------------------
     MOTION — restrained, professional
     ---------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ==========================================================================
   SEMANTIC TYPE — drop-in classes for prose
   ========================================================================== */

.t-display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
}
.t-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
}
.t-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--brand-primary);
}
.t-h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--brand-accent);
}
.t-h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-primary);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.t-tagline {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
}

/* Default element baselines (applied if you opt in by setting body class) */
.kopek-prose h1 { @extend .t-h1; }
.kopek-prose h2 { @extend .t-h2; }
.kopek-prose h3 { @extend .t-h3; }
.kopek-prose p, .kopek-prose li { font-family: var(--font-body); color: var(--text-primary); line-height: var(--lh-body); }