/*
 * Meetalent — Design System CSS Custom Properties
 * Generato da design-system.json v1.0.0
 * Data: 2026-07-11
 * Fonte di verita: /home/storage_progetti/backups/meetalent.it/design-system.json
 *
 * ISTRUZIONI: includere questo file PRIMA di qualsiasi altro CSS del progetto.
 * Non modificare manualmente: aggiornare design-system.json e rigenerare.
 */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:ital,wght@0,500;0,700;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ===== TYPOGRAPHY ===== */
  --ds-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ds-font-serif:   'Fraunces', Georgia, serif;
  --ds-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --ds-font-heading: var(--ds-font-serif);
  --ds-font-body:    var(--ds-font-sans);
  --ds-font-ui:      var(--ds-font-sans);
  --ds-font-code:    var(--ds-font-mono);

  --ds-text-xs:   0.75rem;
  --ds-text-sm:   0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg:   1.125rem;
  --ds-text-xl:   1.25rem;
  --ds-text-2xl:  1.5rem;
  --ds-text-3xl:  1.875rem;
  --ds-text-4xl:  2.25rem;
  --ds-text-5xl:  3rem;
  --ds-text-6xl:  3.75rem;
  --ds-text-7xl:  4.5rem;

  --ds-font-light:    300;
  --ds-font-regular:  400;
  --ds-font-medium:   500;
  --ds-font-semibold: 600;
  --ds-font-bold:     700;
  --ds-font-extrabold:800;

  --ds-leading-tight:   1.2;
  --ds-leading-snug:    1.35;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.65;
  --ds-leading-loose:   1.8;

  --ds-tracking-tight:  -0.025em;
  --ds-tracking-normal: 0em;
  --ds-tracking-wide:   0.025em;
  --ds-tracking-wider:  0.05em;
  --ds-tracking-widest: 0.1em;

  /* ===== BRAND COLORS — PRIMARY (verde smeraldo) ===== */
  --ds-brand-50:      #ecfdf5;
  --ds-brand-100:     #d1fae5;
  --ds-brand-200:     #a7f3d0;
  --ds-brand-300:     #6ee7b7;
  --ds-brand-400:     #34d399;
  --ds-brand-500:     #10b981;
  --ds-brand-600:     #059669;
  --ds-brand-700:     #047857;
  --ds-brand-800:     #065f46;
  --ds-brand-900:     #064e3b;
  --ds-brand-950:     #022c22;
  --ds-brand:         #059669;

  /* ===== BRAND COLORS — ACCENT (viola profondo) ===== */
  --ds-accent-50:     #f5f3ff;
  --ds-accent-100:    #ede9fe;
  --ds-accent-200:    #ddd6fe;
  --ds-accent-300:    #c4b5fd;
  --ds-accent-400:    #a78bfa;
  --ds-accent-500:    #8b5cf6;
  --ds-accent-600:    #7c3aed;
  --ds-accent-700:    #6d28d9;
  --ds-accent-800:    #5b21b6;
  --ds-accent-900:    #4c1d95;
  --ds-accent-950:    #2e1065;
  --ds-accent:        #7c3aed;

  /* ===== BRAND COLORS — WARM (ambra) ===== */
  --ds-warm-50:       #fffbeb;
  --ds-warm-100:      #fef3c7;
  --ds-warm-200:      #fde68a;
  --ds-warm-300:      #fcd34d;
  --ds-warm-400:      #fbbf24;
  --ds-warm-500:      #f59e0b;
  --ds-warm-600:      #d97706;
  --ds-warm-700:      #b45309;
  --ds-warm:          #f59e0b;

  /* ===== NEUTRAL (slate caldo) ===== */
  --ds-neutral-0:     #ffffff;
  --ds-neutral-50:    #f8fafc;
  --ds-neutral-100:   #f1f5f9;
  --ds-neutral-200:   #e2e8f0;
  --ds-neutral-300:   #cbd5e1;
  --ds-neutral-400:   #94a3b8;
  --ds-neutral-500:   #64748b;
  --ds-neutral-600:   #475569;
  --ds-neutral-700:   #334155;
  --ds-neutral-800:   #1e293b;
  --ds-neutral-900:   #0f172a;
  --ds-neutral-950:   #020617;
  --ds-neutral-1000:  #000000;

  /* ===== SEMANTIC ===== */
  --ds-success-light: #dcfce7;
  --ds-success:       #16a34a;
  --ds-success-dark:  #14532d;

  --ds-warning-light: #fef3c7;
  --ds-warning:       #d97706;
  --ds-warning-dark:  #78350f;

  --ds-error-light:   #fee2e2;
  --ds-error:         #dc2626;
  --ds-error-dark:    #7f1d1d;

  --ds-info-light:    #e0f2fe;
  --ds-info:          #0284c7;
  --ds-info-dark:     #0c4a6e;

  /* ===== SURFACE ===== */
  --ds-surface-bg:        #f8fafc;
  --ds-surface-card:      #ffffff;
  --ds-surface-overlay:   rgba(15, 23, 42, 0.6);
  --ds-surface-sidebar:   #0f172a;
  --ds-surface-navbar:    #ffffff;
  --ds-surface-dark:      #0f172a;
  --ds-surface-dark-card: #1e293b;

  /* ===== TEXT ===== */
  --ds-text-primary:   #0f172a;
  --ds-text-secondary: #475569;
  --ds-text-muted:     #94a3b8;
  --ds-text-inverse:   #ffffff;
  --ds-text-link:      #059669;
  --ds-text-link-hover:#047857;

  /* ===== BORDER ===== */
  --ds-border-light:   #e2e8f0;
  --ds-border:         #cbd5e1;
  --ds-border-strong:  #94a3b8;
  --ds-border-focus:   #059669;

  /* ===== GRADIENTS ===== */
  --ds-gradient-hero:      linear-gradient(135deg, #059669 0%, #7c3aed 100%);
  --ds-gradient-hero-dark: linear-gradient(135deg, #0f172a 0%, #064e3b 60%, #2e1065 100%);
  --ds-gradient-cta:       linear-gradient(120deg, #059669, #7c3aed);
  --ds-gradient-warm:      linear-gradient(135deg, #f59e0b 0%, #059669 100%);
  --ds-gradient-card:      linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);

  /* ===== SPACING (8-point grid) ===== */
  --ds-space-0:    0px;
  --ds-space-px:   1px;
  --ds-space-0-5:  2px;
  --ds-space-1:    4px;
  --ds-space-1-5:  6px;
  --ds-space-2:    8px;
  --ds-space-2-5:  10px;
  --ds-space-3:    12px;
  --ds-space-3-5:  14px;
  --ds-space-4:    16px;
  --ds-space-5:    20px;
  --ds-space-6:    24px;
  --ds-space-7:    28px;
  --ds-space-8:    32px;
  --ds-space-9:    36px;
  --ds-space-10:   40px;
  --ds-space-12:   48px;
  --ds-space-14:   56px;
  --ds-space-16:   64px;
  --ds-space-20:   80px;
  --ds-space-24:   96px;
  --ds-space-32:   128px;

  /* ===== BORDER RADIUS ===== */
  --ds-radius-none: 0px;
  --ds-radius-sm:   4px;
  --ds-radius:      8px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   14px;
  --ds-radius-xl:   18px;
  --ds-radius-2xl:  24px;
  --ds-radius-3xl:  32px;
  --ds-radius-4xl:  40px;
  --ds-radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --ds-shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-shadow-sm:      0 2px 8px rgba(15, 23, 42, 0.08);
  --ds-shadow:         0 4px 16px rgba(15, 23, 42, 0.10);
  --ds-shadow-md:      0 8px 24px rgba(15, 23, 42, 0.10);
  --ds-shadow-lg:      0 16px 40px rgba(15, 23, 42, 0.12);
  --ds-shadow-xl:      0 24px 60px rgba(15, 23, 42, 0.14);
  --ds-shadow-2xl:     0 40px 80px rgba(15, 23, 42, 0.16);
  --ds-shadow-inner:   inset 0 2px 8px rgba(15, 23, 42, 0.08);
  --ds-shadow-primary: 0 8px 24px rgba(5, 150, 105, 0.25);
  --ds-shadow-accent:  0 8px 24px rgba(124, 58, 237, 0.25);

  /* ===== Z-INDEX ===== */
  --ds-z-base:     0;
  --ds-z-raised:   10;
  --ds-z-dropdown: 20;
  --ds-z-sticky:   30;
  --ds-z-overlay:  40;
  --ds-z-modal:    50;
  --ds-z-toast:    60;
  --ds-z-tooltip:  70;
  --ds-z-max:      9999;

  /* ===== TRANSITIONS ===== */
  --ds-transition-fast:   all 0.15s ease;
  --ds-transition:        all 0.25s ease;
  --ds-transition-slow:   all 0.4s ease;
  --ds-transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== COMPONENTS ===== */
  --ds-sidebar-width:           260px;
  --ds-sidebar-width-collapsed: 68px;
  --ds-navbar-height:           64px;
}

/* ===== BASE RESETS ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-heading);
  font-weight: var(--ds-font-bold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text-primary);
}

code, pre, kbd, samp {
  font-family: var(--ds-font-mono);
}

a {
  color: var(--ds-text-link);
  transition: var(--ds-transition-fast);
}
a:hover {
  color: var(--ds-text-link-hover);
}