/* =========================================================================
   Cyprusmetrics — colors & type foundations
   ------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Spasiklas palette (logo-aligned: cyan + navy + vibrant accents) --- */
  /* Dark navy — from the mascot's hair/jeans in the logo (was #1f3a5f slate) */
  --cm-navy-900: #0d1f3a;
  --cm-navy-800: #142d52;
  --cm-navy-700: #1a4574;   /* PRIMARY — header bars, hero backgrounds */
  --cm-navy-600: #285896;
  --cm-navy-500: #3d6db1;
  --cm-navy-100: #d6e1ef;
  --cm-navy-050: #ecf2f9;

  /* Brand cyan — from the logo's signature background circle */
  --cm-cyan-900: #064a4a;
  --cm-cyan-800: #0a6e6c;
  --cm-cyan-700: #0a8a87;   /* dark cyan — button hover */
  --cm-cyan-600: #15bbc8;   /* mid cyan — countdown bar */
  --cm-cyan-500: #1ad9d6;   /* PRIMARY brand color — vibrant logo cyan */
  --cm-cyan-300: #7ce3e1;
  --cm-cyan-100: #c6f0ee;
  --cm-cyan-050: #e6f8f8;

  /* Steel blue chart fills (kept for data charts) */
  --cm-steel-700: #2f6699;
  --cm-steel-600: #4a7faa;
  --cm-steel-500: #6ba8d4;
  --cm-steel-300: #b2cee2;
  --cm-steel-100: #dde9f2;

  /* Slate / muted-gray */
  --cm-slate-900: #2c3e50;
  --cm-slate-700: #4a5765;
  --cm-slate-500: #6e7884;
  --cm-slate-300: #b1b8c0;
  --cm-slate-100: #dde1e5;

  /* Accent — CYAN from the logo's signature circle.
     Replaces the old TARGIT orange. Most existing usages of --cm-accent-*
     are "background + white text" or "colored text on white" — both read
     well in cyan. Yellow lives separately as --cm-hi-* highlight tokens. */
  --cm-accent-700: #0a6e6c;   /* dark cyan — button hover, focus rings */
  --cm-accent-600: #15bbc8;   /* PRIMARY accent — cyan CTA (white text) */
  --cm-accent-500: #1ad9d6;   /* bright cyan — eyebrows + decorative text */
  --cm-accent-100: #c6f0ee;   /* soft cyan tint — backgrounds */

  /* Yellow highlight tokens — for badges, "NEW" labels, eyebrow numbers
     anywhere we want grabby attention with dark text on yellow. */
  --cm-hi-700: #b8860b;       /* dark amber — hover state for yellow */
  --cm-hi-600: #fbd213;       /* logo yellow — books / graduation cap color */
  --cm-hi-500: #ffd97a;       /* lighter — soft highlight */
  --cm-hi-100: #fef6cc;       /* faint yellow tint */

  /* Vibrant accent family — from the small icons inside the logo circle.
     Use sparingly, ONE per surface (mathimata = purple, epaggelma = pink, etc.) */
  --cm-vibrant-purple: #af2fb2;   /* graduation cap / accent dots */
  --cm-vibrant-pink:   #d63384;   /* /epaggelma + dot accents */
  --cm-vibrant-green:  #60c040;   /* arrow icon + "Spasiklas" letter accent */
  --cm-vibrant-orange: #ff8040;   /* dot accent */
  --cm-vibrant-coral:  #da896a;   /* skin / warm accent */

  /* --- Neutrals (cool light gray, not warm paper) ------------------- */
  --cm-paper:      #f4f6f8;  /* canvas — cool light gray */
  --cm-paper-cool: #eef1f4;
  --cm-surface:    #ffffff;  /* card surface */
  --cm-ink:        #1c2530;  /* primary text */
  --cm-ink-soft:   #4a5765;  /* secondary text */
  --cm-ink-faint:  #6e7884;  /* tertiary text / captions */
  --cm-rule:       #dee3e8;  /* hairline on white */
  --cm-rule-soft:  #e8ecef;
  --cm-rule-cool:  #d8dee4;

  /* --- Semantic ------------------------------------------------------ */
  --cm-up:      #1f7a3e;     /* positive YoY — green triangle */
  --cm-up-bg:   #e7f3ec;
  --cm-down:    #b73224;     /* negative YoY — red triangle */
  --cm-down-bg: #f7e6e2;
  --cm-warn:    #c98a1a;
  --cm-warn-bg: #f8efd9;
  --cm-info:    var(--cm-steel-600);

  /* --- Categorical chart palette (TARGIT-style restrained) ---------- */
  --cm-c1: #1f3a5f;          /* dark navy — series 1 */
  --cm-c2: #4a7faa;          /* steel blue — series 2 */
  --cm-c3: #6ba8d4;          /* light steel — series 3 */
  --cm-c4: #f39c2c;          /* orange — highlight series */
  --cm-c5: #6e7884;          /* slate — neutral series */
  --cm-c6: #1f7a3e;          /* green — exceeds */

  /* Sequential scale for heatmaps (steel-blue ramp) */
  --cm-seq-1: #eef3f9;
  --cm-seq-2: #cfdfee;
  --cm-seq-3: #a8c6dd;
  --cm-seq-4: #7aa9c8;
  --cm-seq-5: #4a7faa;
  --cm-seq-6: #1f3a5f;

  /* --- Type --- All sans, no serif (TARGIT family) ----------------- */
  --cm-serif:  "Inter", system-ui, sans-serif;     /* alias to sans for legacy refs */
  --cm-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cm-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, restrained — Eurostat / FRED feel) */
  --cm-fs-display: 56px;     /* hero stat */
  --cm-fs-h1:      40px;     /* page title */
  --cm-fs-h2:      28px;     /* section */
  --cm-fs-h3:      20px;     /* subsection */
  --cm-fs-lead:    18px;     /* lead paragraph */
  --cm-fs-body:    15px;     /* body */
  --cm-fs-small:   13px;     /* labels, captions */
  --cm-fs-micro:   11px;     /* eyebrows, source lines */

  --cm-lh-tight:  1.1;
  --cm-lh-snug:   1.25;
  --cm-lh-body:   1.55;
  --cm-lh-loose:  1.7;

  --cm-tracking-eyebrow: 0.08em;
  --cm-tracking-display: -0.01em;

  /* --- Spacing (4-base) --------------------------------------------- */
  --cm-s-1:  4px;
  --cm-s-2:  8px;
  --cm-s-3:  12px;
  --cm-s-4:  16px;
  --cm-s-5:  24px;
  --cm-s-6:  32px;
  --cm-s-7:  48px;
  --cm-s-8:  64px;
  --cm-s-9:  96px;
  --cm-s-10: 128px;

  /* --- Radii (restrained — institutional, never rounded-sleek) ------ */
  --cm-r-0:    0px;
  --cm-r-xs:   2px;
  --cm-r-sm:   4px;
  --cm-r-md:   6px;
  --cm-r-lg:   8px;        /* MAX in normal use */

  /* --- Borders ------------------------------------------------------- */
  --cm-bw:     1px;
  --cm-bw-2:   2px;

  /* --- Shadows (very restrained) ------------------------------------ */
  --cm-sh-card: 0 1px 0 rgba(20, 24, 31, 0.04), 0 1px 2px rgba(20, 24, 31, 0.04);
  --cm-sh-pop:  0 6px 24px -8px rgba(20, 24, 31, 0.18), 0 2px 4px rgba(20, 24, 31, 0.04);
  --cm-sh-modal:0 24px 64px -16px rgba(20, 24, 31, 0.24);

  /* --- Layout -------------------------------------------------------- */
  --cm-container-narrow: 720px;
  --cm-container:        1120px;
  --cm-container-wide:   1320px;
  --cm-gutter:           24px;
}

/* =========================================================================
   Semantic tokens — apply directly to elements
   ------------------------------------------------------------------------- */

html { color-scheme: light; }

body {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-body);
  line-height: var(--cm-lh-body);
  color: var(--cm-ink);
  background: var(--cm-paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — TARGIT-style sans, punchy weight */
h1, .cm-h1 {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-h1);
  font-weight: 700;
  line-height: var(--cm-lh-tight);
  letter-spacing: -0.01em;
  color: var(--cm-ink);
  margin: 0;
}
h2, .cm-h2 {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-h2);
  font-weight: 700;
  line-height: var(--cm-lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
}
h3, .cm-h3 {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-h3);
  font-weight: 600;
  line-height: var(--cm-lh-snug);
  margin: 0;
}

/* Display stat — the big numerals in hero / KPI panels (TARGIT style) */
.cm-display {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum", "lnum";
  color: var(--cm-ink);
}

/* Lead paragraph */
.cm-lead {
  font-size: var(--cm-fs-lead);
  line-height: var(--cm-lh-body);
  color: var(--cm-ink-soft);
}

/* Eyebrow / kicker labels */
.cm-eyebrow {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-micro);
  font-weight: 600;
  letter-spacing: var(--cm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cm-ink-faint);
}

/* Source / footnote line */
.cm-source {
  font-family: var(--cm-sans);
  font-size: var(--cm-fs-micro);
  line-height: 1.4;
  color: var(--cm-ink-faint);
  font-style: italic;
}

/* Numerals — wherever data appears */
.cm-num, .cm-tnum, table.cm-table td, table.cm-table th {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

.cm-mono {
  font-family: var(--cm-mono);
  font-size: 0.92em;
}

/* Bilingual place name — EN primary, EL muted alongside */
.cm-place { font-family: var(--cm-sans); }
.cm-place .el {
  color: var(--cm-ink-faint);
  margin-left: 0.4em;
  font-size: 0.92em;
}

/* Links */
a, .cm-link {
  color: var(--cm-navy-700);
  text-decoration: underline;
  text-decoration-color: var(--cm-navy-100);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
a:hover, .cm-link:hover {
  text-decoration-color: var(--cm-navy-700);
}

/* Selection */
::selection { background: var(--cm-navy-100); color: var(--cm-navy-900); }

/* Focus ring — institutional, square-ish */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cm-navy-700);
  outline-offset: 2px;
  border-radius: var(--cm-r-xs);
}