/* ============================================================
   VARIABLES — Vinit Templates v2 Design System
   Inter + Syne + DM Sans | Orange Accent | Dark/Off-white
   ============================================================ */

:root {
  /* === Colors === */
  --color-bg:          #fafaf9;
  --color-bg-2:        #f5f4f0;
  --color-bg-3:        #f0efe9;
  --color-surface:     #ffffff;
  --color-border:      rgba(0, 0, 0, 0.08);
  --color-border-md:   rgba(0, 0, 0, 0.12);
  --color-border-lg:   rgba(0, 0, 0, 0.18);

  --color-text:        #0f172a;
  --color-text-2:      #334155;
  --color-text-3:      #64748b;
  --color-text-4:      #94a3b8;
  --color-text-inv:    #ffffff;

  /* Accent — Orange (brand) */
  --color-accent:      #ff6a00;
  --color-accent-2:    #ff8533;
  --color-accent-bg:   #fff4ee;
  --color-accent-rgb:  255, 106, 0;

  /* Dark palette */
  --color-dark:        #0f172a;
  --color-dark-2:      #1e293b;
  --color-dark-3:      #334155;

  /* Success green */
  --color-success:     #22c55e;
  --color-success-bg:  #f0fdf4;
  --color-info:        #6366f1;

  /* === Typography === */
  /* Inter: body text, UI labels, readable prose */
  --font-inter:   'Inter', sans-serif;
  /* Syne: display headings, logo, bold statements */
  /* --font-display: 'Syne', sans-serif; */
  --font-display: 'Inter', sans-serif;
  /* DM Sans: secondary body, captions */
  /* --font-body:    'DM Sans', sans-serif; */
  --font-body: 'Inter', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.25rem;
  --text-5xl:   4.5rem;
  --text-6xl:   5.5rem;

  --leading-none:   1;
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* === Spacing === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* === Border Radius === */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.10);
  --shadow-xl:     0 20px 60px rgba(0,0,0,0.12);
  --shadow-2xl:    0 32px 80px rgba(0,0,0,0.16);
  --shadow-accent: 0 8px 28px rgba(255, 106, 0, 0.28);
  --shadow-dark:   0 12px 40px rgba(15, 23, 42, 0.2);

  /* === Transitions === */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* === Layout === */
  --container-max:  1200px;
  --container-pad:  clamp(1.25rem, 5vw, 2.5rem);
  --nav-height:     72px;
}