/* ============================================================
   EMSENHUBER SOLUTIONS — Design Tokens
   Source: design system colors_and_type.css
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tektur';
  src: url('../fonts/Tektur-Variable.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand Palette ──────────────────────────────────────── */
  --color-purple:        #4E36A3;   /* Primary — brand purple */
  --color-purple-light:  #6B52C8;   /* Lighter purple for hover/accents */
  --color-purple-dark:   #3A2880;   /* Darker purple for pressed */
  --color-yellow:        #E7E247;   /* Accent — brand yellow */
  --color-yellow-dark:   #C9C420;   /* Pressed/darker yellow */
  --color-coral:         #EE6C4D;   /* Accent 2 — coral/orange */
  --color-teal:          #4798B5;   /* Accent 3 — teal/blue */
  --color-gray-mid:      #808F87;   /* Neutral mid-gray */

  /* ── Extended Purple Scale ──────────────────────────────── */
  --purple-50:   #f0eefb;
  --purple-100:  #d9d3f5;
  --purple-200:  #b8aded;
  --purple-300:  #9080e2;
  --purple-400:  #6B52C8;
  --purple-500:  #4E36A3;   /* brand */
  --purple-600:  #3A2880;
  --purple-700:  #2a1d60;
  --purple-800:  #1c1340;
  --purple-900:  #0e0a20;

  /* ── Dark Background System ─────────────────────────────── */
  --bg-base:      #0a0812;   /* deepest background */
  --bg-surface:   #120f1e;   /* cards, panels */
  --bg-elevated:  #1a1530;   /* elevated cards */
  --bg-overlay:   #221d3e;   /* modals, popovers */
  --bg-border:    rgba(110, 86, 200, 0.25);   /* glass borders */

  /* ── Foreground / Text ──────────────────────────────────── */
  --fg-1:   #ffffff;         /* primary text */
  --fg-2:   rgba(255,255,255,0.75);  /* secondary text */
  --fg-3:   rgba(255,255,255,0.45);  /* muted / placeholder */
  --fg-4:   rgba(255,255,255,0.25);  /* disabled */
  --fg-inv: #0a0812;         /* text on light surfaces */

  /* ── Semantic Colors ────────────────────────────────────── */
  --color-success:  #4ade80;
  --color-warning:  var(--color-yellow);
  --color-error:    var(--color-coral);
  --color-info:     var(--color-teal);

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-brand:      linear-gradient(135deg, #4E36A3 0%, #6B52C8 50%, #4798B5 100%);
  --gradient-hero:       linear-gradient(135deg, #0e0a20 0%, #2a1d60 50%, #0a1a2e 100%);
  --gradient-purple-pop: linear-gradient(135deg, #4E36A3, #E7E247);
  --gradient-vibes:      linear-gradient(135deg, #4E36A3 0%, #4798B5 40%, #EE6C4D 100%);
  --gradient-glass:      linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  --gradient-purple-glow:radial-gradient(ellipse at 60% 40%, rgba(78,54,163,0.55) 0%, transparent 70%);

  /* ── Glass / Blur Effects ───────────────────────────────── */
  --glass-bg:      rgba(255, 255, 255, 0.07);
  --glass-bg-dark: rgba(10, 8, 18, 0.65);
  --glass-border:  1px solid rgba(110, 86, 200, 0.30);
  --glass-blur:    blur(18px) saturate(160%);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Tektur', 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type Scale ─────────────────────────────────────────── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  /* ── Line Heights ───────────────────────────────────────── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ── Letter Spacing ─────────────────────────────────────── */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;

  /* ── Spacing 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;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.55);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.65);
  --shadow-glow-purple: 0 0 32px rgba(78,54,163,0.6);
  --shadow-glow-yellow: 0 0 24px rgba(231,226,71,0.4);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}