/* ============================================================
   Elegantní Mytí — Design Tokens (colors + type)
   For brand-aligned light marketing surfaces AND Bossboard dark UI.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand palette (from logo) ---------- */
  --em-navy:        #0D2A4E;  /* logo body, primary text on light */
  --em-navy-deep:   #0a1f3b;
  --em-cyan:        #47BFFF;  /* water, accent, CTA */
  --em-cyan-light:  #8AD7FF;
  --em-cyan-deep:   #1A8FD9;  /* hover state */

  /* ---------- Bossboard / Tailwind tokens (existing product) ---------- */
  --em-brand-blue:        #3776D4;
  --em-brand-blue-light:  #659EF3;
  --em-brand-sky:         #4DBEFE;
  --em-brand-teal:        #2EBED2;
  --em-brand-orange:      #FAB82D;  /* warning only — not decorative */
  --em-brand-peach:       #FFBC7D;
  --em-brand-ice:         #F0FBFF;  /* soft background, never plain white */

  /* ---------- Neutral / text ---------- */
  --em-ink:        #212121;
  --em-text:       #1A2B3C;
  --em-text-mute:  #5b6b7d;
  --em-gray:       #767676;
  --em-border:     #e3e9f1;
  --em-bg:         #ffffff;
  --em-bg-soft:    #F0FBFF;

  /* ---------- Dark theme (Bossboard) ---------- */
  --em-dark-bg:           #080e18;  /* "underwater" */
  --em-dark-card:         #0f1d30;
  --em-dark-card-hover:   #132d4a;
  --em-dark-border:       rgba(55, 118, 212, 0.15);
  --em-dark-text:         #d8e2ef;
  --em-dark-muted:        #6b8298;

  /* ---------- Semantic ---------- */
  --em-success:  #10b981;
  --em-warning:  #FAB82D;
  --em-danger:   #ef4444;
  --em-info:     #47BFFF;

  /* ---------- Foreground / background semantic vars ---------- */
  --fg-1: var(--em-navy);        /* primary heading text */
  --fg-2: var(--em-text);        /* body */
  --fg-3: var(--em-text-mute);   /* secondary / metadata */
  --fg-accent: var(--em-cyan-deep);
  --bg-1: var(--em-bg);
  --bg-2: var(--em-bg-soft);
  --bg-elevated: #ffffff;

  /* ---------- Typography stacks ---------- */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (px) ---------- */
  --fs-hero:  64px;   /* oversized hero — marketing only */
  --fs-h1:    36px;
  --fs-h2:    24px;
  --fs-h3:    18px;
  --fs-h4:    16px;
  --fs-body:  15px;
  --fs-small: 13px;
  --fs-meta:  11px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* ---------- Spacing (Tailwind 4px scale) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;   /* default card */
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-sm:    0 1px 2px rgba(13, 42, 78, 0.06);
  --shadow-md:    0 4px 14px rgba(13, 42, 78, 0.08);
  --shadow-lg:    0 12px 32px rgba(13, 42, 78, 0.12);
  --shadow-glow:  0 8px 30px rgba(71, 191, 255, 0.25);

  /* ---------- Brand gradients ---------- */
  --grad-water:    linear-gradient(135deg, #47BFFF 0%, #1A8FD9 50%, #0D2A4E 100%);
  --grad-sky:      linear-gradient(135deg, #8AD7FF 0%, #47BFFF 60%, #2EBED2 100%);
  --grad-ice:      linear-gradient(180deg, #F0FBFF 0%, #ffffff 100%);
  --grad-deep:     linear-gradient(160deg, #0f1d30 0%, #080e18 100%);
  --grad-em-mark:  linear-gradient(135deg, var(--em-brand-blue) 0%, var(--em-brand-teal) 100%);
}

/* ============================================================
   Base typography — semantic element rules
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0 0 var(--space-3); text-wrap: pretty; }
small, .meta { font-size: var(--fs-small); color: var(--fg-3); }
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--em-navy-deep);
}

/* Numeric / KPI */
.numeric, .tabular { font-variant-numeric: tabular-nums; }
.kpi {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--em-cyan-deep);
}

/* Hero / display */
.display {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-hero));
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--em-navy);
}