/* ============================================
   RAF IA Solutions — Design Tokens
   Single source of truth for the entire system
   ============================================ */

:root {

  /* ─── Colors ─── */
  --black:       #000000;
  --white:       #FFFFFF;

  --gray-950:    #080808;
  --gray-900:    #111111;
  --gray-850:    #161616;
  --gray-800:    #1C1C1C;
  --gray-700:    #2A2A2A;
  --gray-600:    #444444;
  --gray-500:    #666666;
  --gray-400:    #888888;
  --gray-300:    #AAAAAA;
  --gray-200:    #CCCCCC;
  --gray-100:    #F0F0F0;
  --gray-50:     #F8F8F8;

  /* Accent — Celeste */
  --accent:          #38BDF8;
  --accent-light:    #7DD3FC;
  --accent-lighter:  #BAE6FD;
  --accent-dark:     #0EA5E9;
  --accent-glow:     rgba(56, 189, 248, 0.25);
  --accent-glow-sm:  rgba(56, 189, 248, 0.12);

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

  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.25rem;     /* 20px */
  --text-xl:    1.5rem;      /* 24px */
  --text-2xl:   2rem;        /* 32px */
  --text-3xl:   2.5rem;      /* 40px */
  --text-4xl:   3rem;        /* 48px */
  --text-5xl:   3.75rem;     /* 60px */
  --text-6xl:   4.5rem;      /* 72px */
  --text-7xl:   5.5rem;      /* 88px */

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

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;
  --leading-loose:    1.9;

  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.15em;

  /* ─── 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 */
  --space-40:   10rem;     /* 160px */

  /* ─── Shadows ─── */
  --shadow-xs:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
  --shadow-xl:   0 16px 64px rgba(0,0,0,0.18);
  --shadow-2xl:  0 24px 80px rgba(0,0,0,0.24);
  --shadow-accent: 0 8px 40px rgba(56,189,248,0.30);

  /* ─── Borders & Radius ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --border-subtle:  1px solid rgba(255,255,255,0.06);
  --border-light:   1px solid rgba(255,255,255,0.10);
  --border-medium:  1px solid rgba(255,255,255,0.16);
  --border-dark:    1px solid rgba(0,0,0,0.08);
  --border-dark-md: 1px solid rgba(0,0,0,0.12);

  /* ─── Transitions ─── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 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;
  --duration-slowest: 900ms;

  /* ─── Layout ─── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  --nav-height: 72px;

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