/* ============================================================
   COLUMBUS LINGUA — Color & Type Foundations
   Certified Ukrainian & Russian → English Translation
   ------------------------------------------------------------
   Aesthetic: modern, clean, premium law-firm. Trust + warmth.
   Palette:   Deep navy · warm gold · white · warm cream/parchment
   Type:      Spectral (serif display) + Open Sans (sans UI, self-hosted)
   ============================================================ */

/* --- Display family (Google Fonts CDN — no uploaded file, so kept on CDN) --- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- Self-hosted brand sans families (uploaded by the client) ---------------
   Primary body/UI = Open Sans. Source Sans 3 and Inter are also wired and
   available — switch the primary by editing --font-sans below.
   All three use variable fonts (one file covers the full weight range). */

/* Open Sans (primary) */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800; font-style: italic; font-display: swap;
}

/* Source Sans 3 (alternate) */
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: italic; font-display: swap;
}

/* Inter (alternate) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ----------------------------------------------------------------
     1. CORE PALETTE  (raw brand colors)
     ---------------------------------------------------------------- */

  /* Navy — the spine of the brand. Authority, trust, depth. */
  --navy-950: #081830;   /* near-black ink, deepest sections        */
  --navy-900: #0C1E3A;   /* primary ink / headings on light         */
  --navy-800: #122A4D;   /* dark section backgrounds                */
  --navy-700: #173A66;   /* PRIMARY brand navy (buttons, marks)     */
  --navy-600: #1E4E8C;   /* interactive blue                        */
  --navy-500: #2E6BB3;   /* bright accent / links / focus           */
  --navy-300: #8FB0D8;   /* on-dark muted text                      */
  --navy-100: #DCE6F2;   /* faint navy tint                         */

  /* Gold — the accent. Premium, certified, warm. Use sparingly. */
  --gold-700: #8F6A1E;   /* deep gold, text-safe on cream           */
  --gold-600: #B08529;   /* gold text on white (AA)                 */
  --gold-500: #C9A24A;   /* PRIMARY gold accent (rules, marks)      */
  --gold-400: #DDBE74;   /* light gold                              */
  --gold-200: #EFE0BC;   /* gold tint                               */
  --gold-bg:  #F6EFDD;   /* gold wash background                    */

  /* Neutrals — warm-leaning whites & a cool slate ladder */
  --white:    #FFFFFF;
  --paper:    #FBF8F1;   /* warm cream "document" surface           */
  --paper-2:  #F4EEE0;   /* deeper cream                            */
  --cloud:    #F4F6FA;   /* cool light surface                      */
  --mist:     #EDF1F7;   /* cool tint / hover fill                  */
  --line:     #E2E7EF;   /* hairline borders on light               */
  --line-warm:#E8DFC9;   /* hairline on cream                       */

  /* Text */
  --ink:      #0C1E3A;   /* fg1 — primary text                      */
  --slate:    #44546B;   /* fg2 — secondary text                    */
  --muted:    #79859A;   /* fg3 — captions, meta                    */
  --faint:    #A8B2C2;   /* fg4 — disabled, placeholders            */
  --on-dark:  #EAF0F8;   /* primary text on navy                    */
  --on-dark-2:#9FB4D2;   /* secondary text on navy                  */

  /* Semantic */
  --success:  #2E7D5B;
  --success-bg:#E7F2EC;
  --warning:  #B08529;
  --warning-bg:#F6EFDD;
  --error:    #B23B3B;
  --error-bg: #F7E9E9;
  --info:     #1E4E8C;
  --info-bg:  #E7EEF7;

  /* ----------------------------------------------------------------
     2. SEMANTIC COLOR ROLES
     ---------------------------------------------------------------- */
  --color-bg:            var(--white);
  --color-bg-warm:       var(--paper);
  --color-bg-cool:       var(--cloud);
  --color-bg-dark:       var(--navy-900);
  --color-surface:       var(--white);
  --color-surface-sunken:var(--cloud);
  --color-border:        var(--line);
  --color-border-strong: #CDD6E2;
  --color-text:          var(--ink);
  --color-text-soft:     var(--slate);
  --color-text-muted:    var(--muted);
  --color-primary:       var(--navy-700);
  --color-primary-hover: var(--navy-800);
  --color-link:          var(--navy-600);
  --color-accent:        var(--gold-500);
  --color-accent-text:   var(--gold-600);
  --color-focus:         var(--navy-500);

  /* ----------------------------------------------------------------
     3. TYPE — families
     ---------------------------------------------------------------- */
  --font-display: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --font-sans: 'Open Sans', 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-sans-alt: 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
  --font-sans-inter: 'Inter', 'Open Sans', system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — fluid-ready px values (marketing scale, 17px base) */
  --fs-display:  clamp(48px, 6vw, 72px);
  --fs-h1:       clamp(38px, 4.4vw, 52px);
  --fs-h2:       clamp(30px, 3.2vw, 38px);
  --fs-h3:       26px;
  --fs-h4:       20px;
  --fs-body-lg:  20px;
  --fs-body:     17px;
  --fs-body-sm:  15px;
  --fs-caption:  13px;
  --fs-eyebrow:  13px;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Tracking */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.16em;

  /* ----------------------------------------------------------------
     4. SPACING — 4px base
     ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ----------------------------------------------------------------
     5. RADII
     ---------------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:999px;

  /* ----------------------------------------------------------------
     6. ELEVATION — soft, premium, navy-tinted
     ---------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(12,30,58,0.06);
  --shadow-sm: 0 2px 6px rgba(12,30,58,0.07);
  --shadow-md: 0 8px 24px -10px rgba(12,30,58,0.16);
  --shadow-lg: 0 24px 48px -18px rgba(12,30,58,0.22);
  --shadow-gold: 0 10px 30px -12px rgba(176,133,41,0.40);
  --ring-focus: 0 0 0 3px rgba(46,107,179,0.30);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ==================================================================
   7. SEMANTIC TYPE CLASSES — apply directly or copy into components
   ================================================================== */
.cl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cl-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cl-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cl-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.cl-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.cl-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--slate);
}
.cl-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--slate);
}
.cl-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--slate);
}
.cl-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
}
.cl-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--muted);
}