/**
 * emailgratis.ro — Design Tokens
 * Philosophy: Claritate luminoasa — curat, prietenos, romanesc
 * Stack: CSS custom properties (vanilla HTML/CSS + Tailwind CDN)
 * Generated: 2026-04-25
 */

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

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  /* --- Raw palette (reference only, use semantic tokens below) --- */
  --_blue-50:   #EFF6FF;
  --_blue-100:  #DBEAFE;
  --_blue-500:  #3B82F6;
  --_blue-600:  #2563EB;
  --_blue-700:  #1D4ED8;
  --_blue-800:  #1E40AF;
  --_slate-50:  #F8FAFC;
  --_slate-100: #F1F5F9;
  --_slate-200: #E2E8F0;
  --_slate-300: #CBD5E1;
  --_slate-400: #94A3B8;
  --_slate-500: #64748B;
  --_slate-600: #475569;
  --_slate-700: #334155;
  --_slate-800: #1E293B;
  --_slate-900: #0F172A;
  --_green-50:  #F0FDF4;
  --_green-600: #16A34A;
  --_green-700: #15803D;
  --_amber-50:  #FFFBEB;
  --_amber-600: #D97706;
  --_red-50:    #FEF2F2;
  --_red-600:   #DC2626;
  --_red-700:   #B91C1C;

  /* --- Backgrounds --- */
  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F8FAFC;   /* sectiuni alternative */
  --color-bg-tertiary:   #F1F5F9;   /* input wells, carduri subtle */
  --color-bg-inverse:    #0F172A;   /* CTA section finala */
  --color-bg-accent:     #EFF6FF;   /* highlight albastru subtil */

  /* --- Text --- */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #64748B;
  --color-text-subtle:    #94A3B8;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      #2563EB;
  --color-text-link-hover: #1D4ED8;

  /* --- Borders --- */
  --color-border-primary:   #E2E8F0;
  --color-border-secondary: #F1F5F9;
  --color-border-focus:     #2563EB;
  --color-border-error:     #DC2626;

  /* --- Accent / Brand --- */
  --color-accent-primary:        #2563EB;
  --color-accent-primary-hover:  #1D4ED8;
  --color-accent-primary-active: #1E40AF;
  --color-accent-primary-light:  #EFF6FF;
  --color-accent-primary-text:   #FFFFFF;

  /* --- Status --- */
  --color-status-success:       #16A34A;
  --color-status-success-bg:    #F0FDF4;
  --color-status-warning:       #D97706;
  --color-status-warning-bg:    #FFFBEB;
  --color-status-error:         #DC2626;
  --color-status-error-bg:      #FEF2F2;
  --color-status-info:          #2563EB;
  --color-status-info-bg:       #EFF6FF;

  /* --- Surface (cards, modals) --- */
  --color-surface:          #FFFFFF;
  --color-surface-raised:   #FFFFFF;
  --color-surface-overlay:  rgba(15, 23, 42, 0.5);

  /* ============================================================
     SPACING (base: 4px)
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13:  128px;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;
  --font-size-4xl:  48px;   /* hero headline desktop */
  --font-size-5xl:  60px;   /* hero headline wide */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-none:     1;
  --line-height-tight:    1.2;   /* headings */
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.65;  /* body text */
  --line-height-loose:    1.8;

  --letter-spacing-tight:  -0.025em;  /* display headings */
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;   /* labels uppercase */
  --letter-spacing-widest:  0.1em;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-width-xs:      480px;
  --max-width-sm:      640px;
  --max-width-content: 720px;   /* text / reading */
  --max-width-md:      896px;
  --max-width-wide:    1120px;  /* sectiuni */
  --max-width-page:    1280px;  /* container principal */

  /* ============================================================
     BORDERS & RADIUS
     ============================================================ */
  --border-width:    1px;
  --border-radius-xs:  4px;
  --border-radius-sm:  6px;
  --border-radius-md:  10px;
  --border-radius-lg:  16px;
  --border-radius-xl:  24px;
  --border-radius-full: 9999px;  /* pill / badge */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 6px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:   0 10px 15px rgba(15, 23, 42, 0.07), 0 4px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl:   0 20px 25px rgba(15, 23, 42, 0.08), 0 8px 10px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     BREAKPOINTS (referinta — folosit in media queries)
     ============================================================ */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* ============================================================
     COMPONENT-LEVEL TOKENS
     ============================================================ */

  /* Button primary */
  --btn-primary-bg:          var(--color-accent-primary);
  --btn-primary-bg-hover:    var(--color-accent-primary-hover);
  --btn-primary-bg-active:   var(--color-accent-primary-active);
  --btn-primary-text:        var(--color-accent-primary-text);
  --btn-primary-radius:      var(--border-radius-md);
  --btn-primary-padding:     var(--space-3) var(--space-6);
  --btn-primary-font-size:   var(--font-size-base);
  --btn-primary-font-weight: var(--font-weight-semibold);

  /* Button secondary */
  --btn-secondary-bg:        transparent;
  --btn-secondary-bg-hover:  var(--color-bg-tertiary);
  --btn-secondary-text:      var(--color-text-primary);
  --btn-secondary-border:    var(--color-border-primary);

  /* Input */
  --input-bg:                var(--color-bg-primary);
  --input-border:            var(--color-border-primary);
  --input-border-focus:      var(--color-border-focus);
  --input-border-error:      var(--color-border-error);
  --input-text:              var(--color-text-primary);
  --input-placeholder:       var(--color-text-subtle);
  --input-radius:            var(--border-radius-sm);
  --input-padding:           var(--space-3) var(--space-4);
  --input-font-size:         var(--font-size-base);

  /* Card */
  --card-bg:                 var(--color-surface);
  --card-border:             var(--color-border-primary);
  --card-radius:             var(--border-radius-lg);
  --card-shadow:             var(--shadow-sm);
  --card-padding:            var(--space-6);

  /* Navbar */
  --navbar-height:           64px;
  --navbar-bg:               rgba(255, 255, 255, 0.95);
  --navbar-border:           var(--color-border-primary);
  --navbar-blur:             blur(8px);

  /* Badge */
  --badge-radius:            var(--border-radius-full);
  --badge-font-size:         var(--font-size-xs);
  --badge-font-weight:       var(--font-weight-semibold);
  --badge-padding:           2px 10px;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg-primary:    #0F172A;
  --color-bg-secondary:  #1E293B;
  --color-bg-tertiary:   #273549;
  --color-bg-inverse:    #FFFFFF;
  --color-bg-accent:     rgba(37, 99, 235, 0.12);

  --color-text-primary:   #E2E8F0;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;
  --color-text-subtle:    #475569;
  --color-text-inverse:   #0F172A;
  --color-text-link:      #60A5FA;
  --color-text-link-hover: #93C5FD;

  --color-border-primary:   #334155;
  --color-border-secondary: #1E293B;
  --color-border-focus:     #3B82F6;

  --color-accent-primary:        #3B82F6;
  --color-accent-primary-hover:  #60A5FA;
  --color-accent-primary-active: #2563EB;
  --color-accent-primary-light:  rgba(59, 130, 246, 0.12);

  --color-status-success:    #4ADE80;
  --color-status-success-bg: rgba(74, 222, 128, 0.1);
  --color-status-warning:    #FBB F24;
  --color-status-warning-bg: rgba(251, 191, 36, 0.1);
  --color-status-error:      #F87171;
  --color-status-error-bg:   rgba(248, 113, 113, 0.1);

  --color-surface:        #1E293B;
  --color-surface-raised: #273549;
  --color-surface-overlay: rgba(0, 0, 0, 0.6);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);

  --navbar-bg:    rgba(15, 23, 42, 0.95);
  --navbar-border: var(--color-border-primary);
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border-primary);
  --input-bg:     var(--color-bg-tertiary);
  --input-border: var(--color-border-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:    #0F172A;
    --color-bg-secondary:  #1E293B;
    --color-bg-tertiary:   #273549;
    --color-bg-inverse:    #FFFFFF;
    --color-bg-accent:     rgba(37, 99, 235, 0.12);
    --color-text-primary:   #E2E8F0;
    --color-text-secondary: #94A3B8;
    --color-text-muted:     #64748B;
    --color-text-subtle:    #475569;
    --color-text-inverse:   #0F172A;
    --color-text-link:      #60A5FA;
    --color-text-link-hover: #93C5FD;
    --color-border-primary:   #334155;
    --color-border-secondary: #1E293B;
    --color-border-focus:     #3B82F6;
    --color-accent-primary:        #3B82F6;
    --color-accent-primary-hover:  #60A5FA;
    --color-accent-primary-active: #2563EB;
    --color-accent-primary-light:  rgba(59, 130, 246, 0.12);
    --color-surface:        #1E293B;
    --color-surface-raised: #273549;
    --color-surface-overlay: rgba(0, 0, 0, 0.6);
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.5);
    --navbar-bg:    rgba(15, 23, 42, 0.95);
    --card-bg:      #1E293B;
    --card-border:  #334155;
    --input-bg:     #273549;
    --input-border: #334155;
  }
}

/* ============================================================
   BASE RESET + GLOBALS
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--border-radius-xs);
}

/* Selection */
::selection {
  background: var(--color-accent-primary-light);
  color: var(--color-accent-primary);
}

/* Scrollbar subtila */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* ============================================================
   UTILITY CLASSES (complementare Tailwind CDN)
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width-page);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-8); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-10); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-primary-padding);
  font-family: var(--font-family-body);
  font-size: var(--btn-primary-font-size);
  font-weight: var(--btn-primary-font-weight);
  line-height: 1;
  border-radius: var(--btn-primary-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-default);
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { background: var(--btn-primary-bg-active); transform: translateY(0); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-md); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }

.card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
}

.input {
  width: 100%;
  background: var(--input-bg);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-family: var(--font-family-body);
  font-size: var(--input-font-size);
  padding: var(--input-padding);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}
.input::placeholder { color: var(--input-placeholder); }
.input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}
.input.error {
  border-color: var(--input-border-error);
  box-shadow: var(--shadow-focus-error);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1.5;
}
.badge-success { background: var(--color-status-success-bg); color: var(--color-status-success); }
.badge-warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.badge-error   { background: var(--color-status-error-bg);   color: var(--color-status-error); }
.badge-info    { background: var(--color-status-info-bg);     color: var(--color-status-info); }

/* Email address pill */
.email-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-accent);
  border: 1px solid var(--color-accent-primary-light);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  font-family: var(--font-family-mono);
}

/* Storage progress bar */
.storage-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}
.storage-bar-fill {
  height: 100%;
  border-radius: var(--border-radius-full);
  background: linear-gradient(90deg, var(--color-accent-primary), #60A5FA);
  transition: width var(--duration-slow) var(--easing-out);
}
.storage-bar-fill.warning { background: linear-gradient(90deg, var(--color-status-warning), #FCD34D); }
.storage-bar-fill.danger  { background: linear-gradient(90deg, var(--color-status-error), #F87171); }