/* FynixChat Design Tokens
   UI/UX Agent — generated 2026-03-26
   Source of truth for all visual decisions on this landing page.
*/

:root {
  /* ─── Color — Brand Core (Light Green Theme) ─── */
  --color-bg:           #F0FDF4;   /* light green tint — page background */
  --color-bg-surface:   #FFFFFF;   /* white — cards, sections */
  --color-bg-elevated:  #DCFCE7;   /* soft green — raised surfaces */

  --color-primary:      #16A34A;   /* rich green — CTAs, links, active states */
  --color-primary-hover:#15803D;   /* darker green for hover */
  --color-primary-dim:  rgba(22, 163, 74, 0.12); /* tinted bg for badges/tags */

  --color-accent:       #4ADE80;   /* bright green — highlights, gradient tips, icons */
  --color-accent-dim:   rgba(74, 222, 128, 0.15);

  --color-text:         #0F172A;   /* near-black — body copy */
  --color-text-muted:   #475569;   /* secondary text, captions */
  --color-text-subtle:  #94A3B8;   /* disabled states, placeholders */

  --color-border:       rgba(22, 163, 74, 0.15);
  --color-border-focus: rgba(22, 163, 74, 0.5);

  --color-success:      #16A34A;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;

  /* ─── Gradients ─── */
  --gradient-hero:      linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 60%, #BBF7D0 100%);
  --gradient-primary:   linear-gradient(135deg, #16A34A 0%, #4ADE80 100%);
  --gradient-glow:      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(22, 163, 74, 0.15) 0%, transparent 70%);
  --gradient-card:      linear-gradient(145deg, #FFFFFF 0%, #F0FDF4 100%);
  --gradient-text:      linear-gradient(90deg, #16A34A, #4ADE80);

  /* ─── Typography ─── */
  --font-sans:          'Inter', system-ui, -apple-system, sans-serif;

  --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 */

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

  --leading-tight:      1.2;
  --leading-snug:       1.35;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;

  --tracking-tight:     -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.1em;

  /* ─── Spacing ─── */
  --space-1:            0.25rem;   /* 4px */
  --space-2:            0.5rem;    /* 8px */
  --space-3:            0.75rem;   /* 12px */
  --space-4:            1rem;      /* 16px */
  --space-5:            1.25rem;   /* 20px */
  --space-6:            1.5rem;    /* 24px */
  --space-8:            2rem;      /* 32px */
  --space-10:           2.5rem;    /* 40px */
  --space-12:           3rem;      /* 48px */
  --space-16:           4rem;      /* 64px */
  --space-20:           5rem;      /* 80px */
  --space-24:           6rem;      /* 96px */
  --space-32:           8rem;      /* 128px */

  /* ─── Layout ─── */
  --container-max:      1200px;
  --container-narrow:   760px;
  --section-padding-y:  var(--space-24);
  --section-padding-x:  var(--space-6);

  /* ─── Border Radius ─── */
  --radius-sm:          0.375rem;  /* 6px */
  --radius-md:          0.625rem;  /* 10px */
  --radius-lg:          1rem;      /* 16px */
  --radius-xl:          1.5rem;    /* 24px */
  --radius-2xl:         2rem;      /* 32px */
  --radius-full:        9999px;

  /* ─── Shadows ─── */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:          0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:          0 24px 64px rgba(0, 0, 0, 0.15);
  --shadow-glow-blue:   0 0 40px rgba(22, 163, 74, 0.25);
  --shadow-glow-cyan:   0 0 30px rgba(74, 222, 128, 0.2);
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);

  /* ─── Transitions ─── */
  --ease-out:           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;
  --duration-slower:    600ms;

  /* ─── Z-Index Scale ─── */
  --z-base:             0;
  --z-above:            10;
  --z-overlay:          100;
  --z-modal:            200;
  --z-nav:              300;
  --z-toast:            400;
}