/* ==========================================================================
   GK Seminars — Colors & Type Tokens
   ---------------------------------------------------------------------------
   Extracted from gkseminars.gr (TheGem / Elementor theme) + the GK logo.
   • Body + all headings use Roboto on the live site (not a serif).
   • Montserrat & Source Sans Pro show up on portfolio/blog tiles.
   • The logo is the only "serif moment" in the brand — we keep a serif
     family (Cormorant) for editorial accents (quotes, eyebrow ornaments),
     but it is secondary.
   • Brand colors are derived from the logo:
       - Navy  #1B2A4A  (the "K")
       - Sky   #7FB0CC  (the "g")
   • The site itself is mostly white + navy with a warm off-white page wash.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&family=Montserrat:wght@200;400;500;600;700;800&family=Source+Sans+3:wght@300;400;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  /* ---------- Brand ---------- */
  --gk-navy:        #1B2A4A;   /* logo "K" — primary brand */
  --gk-navy-deep:   #11203B;
  --gk-navy-ink:    #0B1628;   /* near-black navy for text on light bgs */

  --gk-sky:         #7FB0CC;   /* logo "g" — secondary */
  --gk-sky-soft:    #B5D3E2;
  --gk-sky-wash:    #E8F1F6;   /* page wash / section tint */
  --gk-sky-ink:     #3E6D89;   /* legible sky for small text */

  /* Accent — used rarely (badges, prices, underline) */
  --gk-gold:        #C9A961;
  --gk-gold-soft:   #EADFC2;

  /* ---------- Neutrals ---------- */
  --gk-ink:         #111827;
  --gk-slate-900:   #1F2937;
  --gk-slate-700:   #374151;
  --gk-slate-500:   #6B7280;
  --gk-slate-400:   #9CA3AF;
  --gk-slate-300:   #D1D5DB;
  --gk-slate-200:   #E5E7EB;
  --gk-slate-100:   #F3F4F6;
  --gk-paper:       #FAFAF7;   /* warm off-white page bg */
  --gk-white:       #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--gk-navy-ink);        /* primary text */
  --fg-2: var(--gk-slate-700);       /* body / secondary text */
  --fg-3: var(--gk-slate-500);       /* meta / captions */
  --fg-mute: var(--gk-slate-400);
  --fg-on-dark: var(--gk-white);
  --fg-on-dark-2: rgba(255,255,255,0.72);

  /* ---------- Semantic background ---------- */
  --bg-page:    var(--gk-paper);
  --bg-surface: var(--gk-white);
  --bg-sunken:  var(--gk-slate-100);
  --bg-tint:    var(--gk-sky-wash);
  --bg-invert:  var(--gk-navy);
  --bg-invert-deep: var(--gk-navy-deep);

  /* ---------- Status ---------- */
  --ok:     #2F8F5E;
  --warn:   #B88217;
  --danger: #B8442B;
  --info:   var(--gk-sky);

  /* ---------- Borders ---------- */
  --border-1: #E6E8EC;
  --border-2: #D1D5DB;
  --border-strong: var(--gk-navy);
  --border-on-dark: rgba(255,255,255,0.14);

  /* ---------- Shadows (soft, editorial) ---------- */
  --shadow-xs: 0 1px 2px rgba(11,22,40,0.05);
  --shadow-sm: 0 2px 6px rgba(11,22,40,0.06), 0 1px 2px rgba(11,22,40,0.04);
  --shadow-md: 0 10px 24px -8px rgba(11,22,40,0.14), 0 4px 8px -4px rgba(11,22,40,0.06);
  --shadow-lg: 0 24px 48px -16px rgba(11,22,40,0.22), 0 8px 16px -8px rgba(11,22,40,0.08);
  --shadow-navy-glow: 0 16px 40px -12px rgba(27,42,74,0.35);

  /* ---------- Radii ---------- */
  /* Live site uses mostly small rectangles + a pill (buttons 50px). */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 50px;

  /* ---------- Spacing scale (4pt) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---------- Type families ----------
     The live site is Roboto-dominant. Montserrat & Source Sans Pro are
     used on media tiles (blog/portfolio). Serif is reserved for the
     logo treatment and editorial display accents. */
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Roboto', 'Source Sans 3', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Montserrat', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; /* tiles, big stats */
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;               /* accents only */

  /* ---------- Type sizes (from TheGem theme options) ----------
     Desktop values below; the theme scales down at ≤1199px and ≤767px. */
  --fs-xlarge:  100px;   /* .title-xlarge */
  --fs-h1:      50px;
  --fs-h2:      36px;
  --fs-h3:      30px;
  --fs-h4:      24px;
  --fs-h5:      20px;
  --fs-h6:      16px;
  --fs-body:    17px;
  --fs-body-tiny: 14.875px;
  --fs-small:   14px;
  --fs-meta:    13px;
  --fs-micro:   11px;
  --fs-menu:    16px;    /* main nav */
  --fs-submenu: 15px;
  --fs-eyebrow: 12px;

  /* ---------- Line heights (site-matched) ---------- */
  --lh-xlarge:  100px;   /* for 100px title */
  --lh-h1:      69px;
  --lh-h2:      53px;
  --lh-h3:      35px;
  --lh-h4:      38px;
  --lh-h5:      30px;
  --lh-h6:      25px;
  --lh-body:    25px;
  --lh-tight:   1.1;
  --lh-snug:    1.25;

  /* ---------- Font weights (site-matched) ----------
     Site defaults: headings 500, body 400, "light" 300, buttons 500,
     widget titles 700, Montserrat portfolio titles 700. */
  --fw-thin:    200;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---------- Letter spacing ---------- */
  --ls-base:    0;      /* theme uses 0 almost everywhere */
  --ls-widget:  0.8px;  /* widget titles, uppercase */
  --ls-eyebrow: 0.18em;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ==========================================================================
   Semantic element styles — apply .gk-base to <body> and use these classes.
   These mirror the TheGem defaults but consolidated.
   ========================================================================== */

body.gk-base {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gk-xlarge {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xlarge);
  line-height: var(--lh-xlarge);
  color: var(--fg-1);
}
.gk-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--fg-1);
}
.gk-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
}
.gk-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
}
.gk-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
}
.gk-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--fg-1);
}
.gk-h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  color: var(--fg-1);
}

/* Site pattern: a ".light" variant of any title = weight 300 */
.gk-light-title { font-weight: var(--fw-light); }

/* "styled-subtitle" pattern in TheGem — 30px, weight 500, used above cards */
.gk-styled-subtitle {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 30px;
  line-height: 35px;
  color: var(--fg-1);
}

/* Widget title — uppercase 16px/30, tracking 0.8px, weight 700 */
.gk-widget-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 30px;
  text-transform: uppercase;
  letter-spacing: var(--ls-widget);
  color: var(--fg-1);
}

/* Page title excerpt — 24px/37, weight 300 */
.gk-excerpt {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 24px;
  line-height: 37px;
  color: var(--fg-2);
}

.gk-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gk-sky-ink);
}

.gk-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.gk-body-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-body-tiny);
  line-height: 21.875px;
  color: var(--fg-2);
}

.gk-small { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.55; }
.gk-meta  { font-size: var(--fs-meta);  color: var(--fg-3); letter-spacing: 0.02em; }

/* Editorial accent only — used sparingly (quote marks, ornaments). */
.gk-serif-accent {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  color: var(--gk-sky-ink);
}

/* The site uses ❖ ❋ ➤ ? as decorative glyphs before section titles. */
.gk-ornament {
  font-family: var(--font-serif);
  color: var(--gk-sky);
  font-size: 28px;
  line-height: 1;
}

/* Link — site default is navy, hover lightens to sky */
.gk-link {
  color: var(--gk-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.gk-link:hover { color: var(--gk-sky-ink); }

/* Responsive shrink rules matching TheGem breakpoints */
@media (max-width: 1199px) {
  .gk-h1 { font-size: 38px; line-height: 53px; }
  .gk-h2 { font-size: 32px; line-height: 42px; }
  .gk-h3 { font-size: 26px; line-height: 38px; }
  .gk-h4 { font-size: 22px; line-height: 36px; }
  .gk-h5 { font-size: 19px; line-height: 30px; }
  .gk-xlarge { font-size: 50px; line-height: 69px; }
  .gk-styled-subtitle { font-size: 20px; line-height: 34px; }
  .gk-excerpt { font-size: 22px; line-height: 34px; }
  body.gk-base { font-size: 16px; }
}
@media (max-width: 767px) {
  .gk-h1 { font-size: 36px; line-height: 48px; }
  .gk-h2 { font-size: 30px; line-height: 40px; }
  .gk-h3 { font-size: 24px; line-height: 34px; }
  .gk-h4 { font-size: 24px; line-height: 30px; }
  .gk-h5 { font-size: 19px; line-height: 26px; }
  .gk-xlarge { font-size: 36px; line-height: 53px; }
  .gk-styled-subtitle { font-size: 22px; line-height: 27px; }
  .gk-excerpt { font-size: 20px; line-height: 27px; }
}