/* ============================================================
   ΤΗΛΕΜΑΤΙΚΗ ICT — Design tokens (v2 · Calm Enterprise)
   Navy = titles · Blue = accents (light surfaces) · Cyan = the
   brand signal (eyebrows, rules, numerals, accents on dark).
   Light is the default theme; [data-theme="dark"] inverts
   surfaces. Semantic aliases only — components never reference
   raw ramp values directly.
   ============================================================ */

/* ---- Self-hosted fonts (Typography guidelines, Nov 2026) ----
   Two families only: Manrope (display: titles, KPI figures) + Inter (text/UI).
   One variable woff2 per family, subset to latin + latin-ext + greek,
   served from our own domain (no Google Fonts CDN — GDPR). SIL OFL licences
   in assets/fonts/. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
}

:root {
  /* ================= Brand ramps ================= */
  --tm-navy-950: #081426;
  --tm-navy-900: #0A2046;
  --tm-navy-850: #0C2650;
  --tm-navy-800: #0F2D5F;
  --tm-navy-700: #14397A;
  --tm-blue-600: #1B4DA0;
  --tm-blue-500: #2A62BE;
  --tm-blue-400: #4E83D6;

  --tm-cyan-800: #1B7099; /* smallest cyan that passes 4.5:1 on white */
  --tm-cyan-700: #2A9BCF;
  --tm-cyan-600: #3FB0E0;
  --tm-cyan-500: #5BC4EC;
  --tm-cyan-300: #A6DDF4;
  --tm-cyan-100: #EAF6FB;

  --tm-ink:      #2D3142;
  --tm-gray-700: #4A4F5E;
  --tm-gray-600: #6E7280;
  --tm-gray-400: #9AA0AC;
  --tm-gray-300: #C9CDD6;
  --tm-gray-200: #E2E5EB;
  --tm-gray-100: #F1F3F6;
  --tm-gray-50:  #F8F9FB;
  --tm-white:    #FFFFFF;

  --tm-success:  #1F9D72;
  --tm-warning:  #E0A106;
  --tm-danger:   #D2433A;

  /* ================= Typography (guidelines: Manrope + Inter) ================= */
  --font-display: 'Manrope', 'Aptos Display', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-body:    'Inter', 'Aptos', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-sans:    var(--font-body);
  /* Legacy alias: everything that used IBM Plex Mono (figures, numerals,
     index numbers) now uses the display face with tabular figures. */
  --font-mono:    var(--font-display);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Scale — mobile → desktop values from the guidelines */
  --fs-eyebrow:  clamp(12px, 0.1vw + 11.6px, 13px);
  --fs-caption:  clamp(13px, 0.1vw + 12.6px, 14px);
  --fs-small:    14px;
  --fs-body:     clamp(16px, 0.1vw + 15.6px, 17px);
  --fs-body-lg:  clamp(18px, 0.19vw + 17.3px, 20px);   /* lead */
  --fs-ui:       clamp(15px, 0.1vw + 14.6px, 16px);    /* menu, buttons */
  --fs-h6:       18px;
  --fs-h5:       clamp(18px, 0.4vw + 16.4px, 21px);
  --fs-h4:       clamp(19px, 0.5vw + 17px, 22px);
  --fs-h3:       clamp(1.25rem, 2vw, 1.5rem);          /* 20 → 24 */
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);          /* 28 → 40 */
  --fs-h1:       clamp(2.5rem, 5vw, 4rem);             /* 40 → 64 */
  --fs-display:  clamp(2.5rem, 5vw, 4rem);             /* hero H1 40 → 64 */
  --fs-kpi:      clamp(2.5rem, 3.5vw, 3.5rem);         /* 40 → 56 */

  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-lead:     1.55;

  --ls-eyebrow:  0.12em;
  --ls-heading:  -0.01em;
  --ls-tight:    -0.02em;

  /* ================= Spacing / geometry ================= */
  --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;

  /* Fluid section rhythm — tight enough to keep the story moving */
  --section-pad: clamp(56px, 7vw, 100px);

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --border-w:   1px;
  --rule-w:     3px;

  --container:      1200px;
  --container-wide: 1320px;
  --gutter:         clamp(20px, 4vw, 32px);
  --header-h:       72px;

  /* ================= Motion ================= */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --dur-reveal: 700ms;

  /* ================= Semantic: LIGHT (default) ================= */
  color-scheme: light;

  --text-title:    var(--tm-navy-800);
  --text-body:     var(--tm-ink);
  --text-muted:    var(--tm-gray-600);   /* caption / footer grey #6E7280 */
  --text-lead:     var(--tm-blue-600);   /* lead (subtitle) Blue #1B4DA0 */
  --text-eyebrow:  var(--tm-cyan-800); /* darker cyan on white for legibility (4.5:1); #5BC4EC on dark surfaces */
  --text-link:     var(--tm-blue-600);
  --text-numeral:  var(--tm-cyan-700); /* WCAG AA large-text 3:1 on white */

  --surface-page:   var(--tm-white);
  --surface-subtle: var(--tm-gray-50);
  --surface-card:   var(--tm-white);
  --surface-tint:   var(--tm-cyan-100);
  --surface-raised: var(--tm-white);

  /* Dark sections keep these regardless of theme */
  --surface-dark:   var(--tm-navy-800);
  --surface-dark-2: var(--tm-navy-900);
  --text-on-dark:        #F4F7FB;
  --text-on-dark-muted:  #B9C4D6;

  --border-subtle:  var(--tm-gray-200);
  --border-strong:  var(--tm-gray-300);
  --rule-accent:    var(--tm-cyan-500);

  --accent:         var(--tm-blue-600);
  --accent-hover:   var(--tm-blue-500);
  --accent-active:  var(--tm-navy-700);
  --accent-contrast: var(--tm-white);
  --focus-ring:     var(--tm-cyan-500);

  --shadow-sm: 0 1px 2px rgba(15, 45, 95, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 45, 95, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 45, 95, 0.12);
  --shadow-focus: 0 0 0 3px rgba(91, 196, 236, 0.45);

  /* Glass (header on scroll, subtle overlays only) */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 45, 95, 0.08);
  --glass-blur: 14px;

  /* Header */
  --header-bg: var(--glass-bg);
  --header-border: var(--glass-border);
}

/* ================= Semantic: DARK ================= */
[data-theme="dark"] {
  color-scheme: dark;

  --text-title:    #F4F7FB;
  --text-body:     #C6CFDE;
  --text-muted:    #8D99AE;
  --text-lead:     #C6CFDE;
  --text-eyebrow:  var(--tm-cyan-500);
  --text-link:     var(--tm-cyan-500);
  --text-numeral:  var(--tm-cyan-500);

  --surface-page:   var(--tm-navy-950);
  --surface-subtle: #0A1A33;
  --surface-card:   #0D2140;
  --surface-tint:   rgba(91, 196, 236, 0.08);
  --surface-raised: #10264A;

  --surface-dark:   #0A1B36;
  --surface-dark-2: var(--tm-navy-950);

  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --accent:          var(--tm-cyan-500);
  --accent-hover:    var(--tm-cyan-300);
  --accent-active:   var(--tm-cyan-600);
  --accent-contrast: var(--tm-navy-900);

  --shadow-sm: 0 1px 2px rgba(2, 8, 20, 0.4);
  --shadow-md: 0 4px 14px rgba(2, 8, 20, 0.45);
  --shadow-lg: 0 12px 32px rgba(2, 8, 20, 0.55);

  --glass-bg: rgba(8, 20, 38, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);

  --header-bg: var(--glass-bg);
  --header-border: var(--glass-border);
}