/* =============================================================
   EIPME — Colors & Type
   Liquid-glass design system for a B2B services brand
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500;1,700;1,800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand color ---------- */
  /* Primary: electric blue. The brand's main signal. */
  --blue-50:  #EEF3FF;
  --blue-100: #D9E4FF;
  --blue-200: #B4C8FF;
  --blue-300: #8AA8FF;
  --blue-400: #5A82FF;
  --blue-500: #1F5EFF;  /* primary */
  --blue-600: #0A47E0;
  --blue-700: #0735B0;
  --blue-800: #052580;
  --blue-900: #03194F;

  /* Accent: signal red. Use SPARINGLY — alerts, deletes, critical CTAs. */
  --red-50:  #FFEEF0;
  --red-100: #FFD6DA;
  --red-200: #FFB0B7;
  --red-300: #FF8089;
  --red-400: #FF5660;
  --red-500: #FF3B47;  /* signal */
  --red-600: #E51F2D;
  --red-700: #B5111E;
  --red-800: #800813;
  --red-900: #4F040B;

  /* Warm: brand orange. The second half of the logo gradient. Used for
     gradients, energy/warmth accents, illustration — NOT for alerts (that's red). */
  --orange-50:  #FFF1E6;
  --orange-100: #FFDEC2;
  --orange-200: #FFC194;
  --orange-300: #FFA15C;
  --orange-400: #FF8C33;
  --orange-500: #FF7A1A;  /* brand orange */
  --orange-600: #E5650A;
  --orange-700: #B54D04;
  --orange-800: #803601;
  --orange-900: #4F2100;

  /* ---------- Brand gradient — the E-Mark signature ---------- */
  /* Blue → orange, the diagonal of the logo. Use on the mark, hero accents,
     one feature surface per screen. Never behind body text. */
  --brand-gradient: linear-gradient(135deg, #2A66FF 0%, #7A6FC0 48%, #FF7A1A 100%);
  --brand-gradient-soft: linear-gradient(135deg, #1F5EFF 0%, #FF7A1A 140%);
  /* Vivid CTA gradient — punchier, skips the muddy middle for max vibrancy */
  --brand-gradient-vivid: linear-gradient(110deg, #2F6BFF 0%, #5A82FF 30%, #FF8C33 72%, #FF7A1A 100%);

  /* Neutrals: obsidian → paper. Cool-leaning. */
  --ink-1000: #050608;  /* deepest obsidian */
  --ink-950:  #08090C;
  --ink-900:  #0C0E13;
  --ink-800:  #14171E;
  --ink-700:  #1C202A;
  --ink-600:  #292E3A;
  --ink-500:  #3D434F;
  --ink-400:  #5B6271;
  --ink-300:  #858B98;
  --ink-200:  #B4B8C2;
  --ink-100:  #D6D9DF;
  --ink-50:   #ECEEF1;
  --ink-25:   #F5F7F9;
  --ink-10:   #FAFBFC;
  --ink-0:    #FFFFFF;

  /* ---------- Semantic surfaces — LIGHT (default) ---------- */
  --bg:        #FAFBFC;
  --bg-elev:   #FFFFFF;
  --bg-sunken: #F0F2F6;
  --fg-1:      #08090C;   /* primary text */
  --fg-2:      #3D434F;   /* secondary text */
  --fg-3:      #5B6271;   /* tertiary / captions */
  --fg-mute:   #858B98;   /* placeholder, disabled */
  --line:      rgba(8, 9, 12, 0.08);
  --line-strong: rgba(8, 9, 12, 0.16);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-press:  var(--blue-700);
  --on-accent:     #FFFFFF;

  --signal:        var(--red-500);
  --signal-hover:  var(--red-600);

  /* ---------- Glass — BRIGHT (light surface) ---------- */
  --glass-bright-fill: rgba(255, 255, 255, 0.55);
  --glass-bright-fill-strong: rgba(255, 255, 255, 0.72);
  --glass-bright-stroke: rgba(255, 255, 255, 0.85);
  --glass-bright-highlight: rgba(255, 255, 255, 0.9);
  --glass-bright-shadow: 0 1px 0 rgba(255,255,255,0.8) inset,
                         0 -1px 0 rgba(8,9,12,0.04) inset,
                         0 8px 24px -8px rgba(8, 9, 12, 0.12),
                         0 24px 56px -16px rgba(31, 94, 255, 0.18);

  /* ---------- Glass — DARK (over rich backgrounds) ---------- */
  --glass-dark-fill: rgba(20, 23, 30, 0.45);
  --glass-dark-fill-strong: rgba(20, 23, 30, 0.62);
  --glass-dark-stroke: rgba(255, 255, 255, 0.12);
  --glass-dark-highlight: rgba(255, 255, 255, 0.18);
  --glass-dark-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
                       0 -1px 0 rgba(0,0,0,0.4) inset,
                       0 12px 40px -8px rgba(0, 0, 0, 0.5),
                       0 32px 80px -24px rgba(31, 94, 255, 0.35);

  /* ---------- Glass — TINT (blue-tinted glass) ---------- */
  --glass-blue-fill: rgba(31, 94, 255, 0.18);
  --glass-blue-stroke: rgba(138, 168, 255, 0.45);
  --glass-blue-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
                       0 16px 48px -12px rgba(31, 94, 255, 0.55);

  --glass-blur: 24px;
  --glass-blur-strong: 40px;
  --glass-saturate: 1.6;

  /* ---------- Spacing — 4pt base ---------- */
  --s-0:  0;
  --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;

  /* ---------- Radii — generous, glass-friendly ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-3xl: 44px;
  --r-pill: 999px;

  /* ---------- Elevation — soft, blue-tinged shadows ---------- */
  --shadow-1: 0 1px 2px rgba(8, 9, 12, 0.06),
              0 1px 1px rgba(8, 9, 12, 0.04);
  --shadow-2: 0 4px 8px -2px rgba(8, 9, 12, 0.06),
              0 2px 4px -2px rgba(8, 9, 12, 0.04);
  --shadow-3: 0 12px 24px -8px rgba(8, 9, 12, 0.10),
              0 4px 8px -4px rgba(8, 9, 12, 0.04);
  --shadow-4: 0 24px 48px -12px rgba(8, 9, 12, 0.16),
              0 8px 16px -8px rgba(8, 9, 12, 0.06);
  --shadow-glow: 0 0 0 1px rgba(31, 94, 255, 0.20),
                 0 8px 32px -4px rgba(31, 94, 255, 0.40);
  --shadow-glow-red: 0 0 0 1px rgba(255, 59, 71, 0.24),
                     0 8px 32px -4px rgba(255, 59, 71, 0.42);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;

  /* ---------- Typography ---------- */
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — fluid display, fixed UI */
  --t-display-xl: clamp(56px, 8vw, 112px);
  --t-display-l:  clamp(40px, 5.5vw, 72px);
  --t-display-m:  clamp(32px, 4vw, 56px);
  --t-h1:         40px;
  --t-h2:         32px;
  --t-h3:         24px;
  --t-h4:         20px;
  --t-body-l:     18px;
  --t-body:       16px;
  --t-body-s:     14px;
  --t-label:      12px;
  --t-micro:      11px;

  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  --track-display: -0.03em;
  --track-heading: -0.02em;
  --track-body:    -0.005em;
  --track-label:   0.08em;   /* uppercase labels */
}

/* =============================================================
   Dark mode — invert surfaces, keep accent
   Glass dark becomes the default over deep obsidian backgrounds.
   ============================================================= */
[data-theme="dark"] {
  --bg:        #08090C;
  --bg-elev:   #14171E;
  --bg-sunken: #050608;
  --fg-1:      #FAFBFC;
  --fg-2:      #B4B8C2;
  --fg-3:      #858B98;
  --fg-mute:   #5B6271;
  --line:      rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent:        #5A82FF;
  --accent-hover:  #8AA8FF;
  --accent-press:  #B4C8FF;
  --on-accent:     #08090C;
}

/* =============================================================
   Semantic typography — drop-in element styles
   ============================================================= */
html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-heading);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

.t-display-xl, .t-display-l, .t-display-m {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-display-xl); }
.t-display-l  { font-size: var(--t-display-l); }
.t-display-m  { font-size: var(--t-display-m); }

p, .t-body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.t-body-l { font-size: var(--t-body-l); line-height: var(--lh-body); color: var(--fg-2); }
.t-body-s { font-size: var(--t-body-s); line-height: var(--lh-body); color: var(--fg-3); }

.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono { font-family: var(--font-mono); font-feature-settings: "ss01", "cv11"; }

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(31, 94, 255, 0.25); color: var(--fg-1); }

/* =============================================================
   Reusable surface classes
   ============================================================= */
.surface { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }

.glass-bright {
  background: var(--glass-bright-fill);
  border: 1px solid var(--glass-bright-stroke);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-bright-shadow);
}
.glass-dark {
  background: var(--glass-dark-fill);
  border: 1px solid var(--glass-dark-stroke);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-dark-shadow);
  color: #fff;
}
.glass-blue {
  background: var(--glass-blue-fill);
  border: 1px solid var(--glass-blue-stroke);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-blue-shadow);
}

/* Inner top highlight on glass (Liquid-glass signature) */
.glass-bright::before,
.glass-dark::before,
.glass-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-bright-highlight, rgba(255,255,255,0.9)) 0%, transparent 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.glass-dark::before { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 28%); opacity: 1; }
.glass-blue::before { background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 26%); }