/* ============================================
   COMPANYWISE — tokens.css
   Design tokens · Tailwind-aligned palette
   Swap the primitives to reskin any app.
   ============================================ */

:root {

  /* ── Primitives (Tailwind palette · 50 bg / 500 fg / 600 hover) ── */

  --red-50:       #fef2f2;
  --red-500:      #ef4444;
  --red-600:      #dc2626;

  --orange-50:    #fff7ed;
  --orange-500:   #f97316;
  --orange-600:   #ea580c;

  --amber-50:     #fffbeb;
  --amber-500:    #f59e0b;
  --amber-600:    #d97706;

  --yellow-50:    #fefce8;
  --yellow-500:   #eab308;
  --yellow-600:   #ca8a04;

  --lime-50:      #f7fee7;
  --lime-500:     #84cc16;
  --lime-600:     #65a30d;

  --green-50:     #f0fdf4;
  --green-500:    #22c55e;
  --green-600:    #16a34a;

  --emerald-50:   #ecfdf5;
  --emerald-500:  #10b981;
  --emerald-600:  #059669;

  --teal-50:      #f0fdfa;
  --teal-500:     #14b8a6;
  --teal-600:     #0d9488;

  --cyan-50:      #ecfeff;
  --cyan-500:     #06b6d4;
  --cyan-600:     #0891b2;

  --sky-50:       #f0f9ff;
  --sky-500:      #0ea5e9;
  --sky-600:      #0284c7;

  --blue-50:      #eff6ff;
  --blue-500:     #3b82f6;
  --blue-600:     #2563eb;

  --indigo-50:    #eef2ff;
  --indigo-500:   #6366f1;
  --indigo-600:   #4f46e5;

  --violet-50:    #f5f3ff;
  --violet-500:   #8b5cf6;
  --violet-600:   #7c3aed;

  --purple-50:    #faf5ff;
  --purple-500:   #a855f7;
  --purple-600:   #9333ea;

  --fuchsia-50:   #fdf4ff;
  --fuchsia-500:  #d946ef;
  --fuchsia-600:  #c026d3;

  --pink-50:      #fdf2f8;
  --pink-500:     #ec4899;
  --pink-600:     #db2777;

  --rose-50:      #fff1f2;
  --rose-500:     #f43f5e;
  --rose-600:     #e11d48;

  /* Neutral */
  --neutral-50:   #fafafa;
  --neutral-100:  #f5f5f5;
  --neutral-200:  #e5e5e5;
  --neutral-400:  #a3a3a3;
  --neutral-500:  #737373;
  --neutral-600:  #525252;
  --neutral-700:  #404040;
  --neutral-800:  #262626;
  --neutral-900:  #171717;

  /* ── Semantic ─────────────────────────────── */

  --brand:          var(--blue-500);
  --brand-hover:    var(--blue-600);
  --brand-bg:       var(--blue-50);

  --cta:            #fbbf24; /* yellow-400 */
  --cta-hover:      var(--yellow-500);
  --cta-disabled:   #fde047; /* yellow-300 */

  --success:        var(--emerald-500);
  --success-bg:     var(--emerald-50);

  --warning:        var(--amber-600);
  --warning-bg:     var(--amber-50);

  --danger:         var(--red-600);
  --danger-bg:      var(--red-50);

  /* Text */
  --text:           var(--neutral-900);
  --text-strong:    var(--neutral-800);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-faint:     var(--neutral-400);

  /* Surfaces */
  --surface:        #ffffff;
  --page:           var(--neutral-50);
  --muted:          var(--neutral-100);
  --border:         var(--neutral-200);

  /* ── Typography ───────────────────────────── */

  --font:           'Overpass', system-ui, sans-serif;
  --font-display:   'Jost', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Consolas', 'Liberation Mono', monospace;

  /* Font size — Tailwind text-{size} scale */
  --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 */
  --text-8xl:       6rem;       /* 96px */
  --text-9xl:       8rem;       /* 128px */

  /* Font weight — Tailwind font-{weight} */
  --font-thin:      100;
  --font-extralight:200;
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* Letter spacing — Tailwind tracking-{size} */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* Line height — Tailwind leading-{number} (v4: spacing-based) */
  --leading-none:     1;
  --leading-3:        0.75rem;  /* 12px */
  --leading-4:        1rem;     /* 16px */
  --leading-5:        1.25rem;  /* 20px */
  --leading-6:        1.5rem;   /* 24px */
  --leading-7:        1.75rem;  /* 28px */
  --leading-8:        2rem;     /* 32px */
  --leading-9:        2.25rem;  /* 36px */
  --leading-10:       2.5rem;   /* 40px */

  /* Named leading — semantic aliases (from v3, useful shortcuts) */
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* ── Border radius — Tailwind rounded-{size} ── */

  --rounded-sm:     0.125rem;   /* 2px  */
  --rounded:        0.25rem;    /* 4px  */
  --rounded-md:     0.375rem;   /* 6px  */
  --rounded-lg:     0.5rem;     /* 8px  */
  --rounded-xl:     0.75rem;    /* 12px */
  --rounded-2xl:    1rem;       /* 16px */
  --rounded-3xl:    1.5rem;     /* 24px */
  --rounded-full:   9999px;

  /* ── Border width — Tailwind border-{size} ── */

  --border-0:       0px;
  --border-1:       1px;
  --border-2:       2px;
  --border-4:       4px;
  --border-8:       8px;

  /* ── Outline width — Tailwind outline-{size} ── */

  --outline-0:      0px;
  --outline-1:      1px;
  --outline-2:      2px;
  --outline-4:      4px;
  --outline-8:      8px;

  /* ── Outline offset — Tailwind outline-offset-{size} ── */

  --outline-offset-0: 0px;
  --outline-offset-1: 1px;
  --outline-offset-2: 2px;
  --outline-offset-4: 4px;
  --outline-offset-8: 8px;

  /* ── Spacing — Tailwind spacing scale (rem) ── */

  --space-0:        0;
  --space-px:       1px;
  --space-0-5:      0.125rem;   /* 2px  */
  --space-1:        0.25rem;    /* 4px  */
  --space-1-5:      0.375rem;   /* 6px  */
  --space-2:        0.5rem;     /* 8px  */
  --space-2-5:      0.625rem;   /* 10px */
  --space-3:        0.75rem;    /* 12px */
  --space-3-5:      0.875rem;   /* 14px */
  --space-4:        1rem;       /* 16px */
  --space-5:        1.25rem;    /* 20px */
  --space-6:        1.5rem;     /* 24px */
  --space-7:        1.75rem;    /* 28px */
  --space-8:        2rem;       /* 32px */
  --space-9:        2.25rem;    /* 36px */
  --space-10:       2.5rem;     /* 40px */
  --space-11:       2.75rem;    /* 44px */
  --space-12:       3rem;       /* 48px */
  --space-14:       3.5rem;     /* 56px */
  --space-16:       4rem;       /* 64px */
  --space-20:       5rem;       /* 80px */
  --space-24:       6rem;       /* 96px */
  --space-28:       7rem;       /* 112px */
  --space-32:       8rem;       /* 128px */
  --space-36:       9rem;       /* 144px */
  --space-40:       10rem;      /* 160px */
  --space-44:       11rem;      /* 176px */
  --space-48:       12rem;      /* 192px */
  --space-52:       13rem;      /* 208px */
  --space-56:       14rem;      /* 224px */
  --space-60:       15rem;      /* 240px */
  --space-64:       16rem;      /* 256px */
  --space-72:       18rem;      /* 288px */
  --space-80:       20rem;      /* 320px */
  --space-96:       24rem;      /* 384px */

  /* ── Sizing — container / screen breakpoints ─ */

  --screen-sm:      640px;
  --screen-md:      768px;
  --screen-lg:      1024px;
  --screen-xl:      1280px;
  --screen-2xl:     1536px;

  --container-sm:   40rem;      /* 640px */
  --container-md:   48rem;      /* 768px */
  --container-lg:   64rem;      /* 1024px */
  --container-xl:   80rem;      /* 1280px */
  --container-2xl:  96rem;      /* 1536px */

  /* Max-width — Tailwind max-w-{size} (v4 container scale) */
  --max-w-3xs:      16rem;      /* 256px */
  --max-w-2xs:      18rem;      /* 288px */
  --max-w-xs:       20rem;      /* 320px */
  --max-w-sm:       24rem;      /* 384px */
  --max-w-md:       28rem;      /* 448px */
  --max-w-lg:       32rem;      /* 512px */
  --max-w-xl:       36rem;      /* 576px */
  --max-w-2xl:      42rem;      /* 672px */
  --max-w-3xl:      48rem;      /* 768px */
  --max-w-4xl:      56rem;      /* 896px */
  --max-w-5xl:      64rem;      /* 1024px */
  --max-w-6xl:      72rem;      /* 1152px */
  --max-w-7xl:      80rem;      /* 1280px */

  /* ── Z-index — Tailwind z-{level} ──────────── */

  --z-0:            0;
  --z-10:           10;
  --z-20:           20;
  --z-30:           30;
  --z-40:           40;
  --z-50:           50;

  /* ── Box shadow — Tailwind shadow-{size} (v4) ── */

  --shadow-2xs:     0 1px rgb(0 0 0 / 0.05);
  --shadow-xs:      0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:      0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:     0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-none:    0 0 #0000;

  /* ── Opacity — Tailwind opacity-{value} ────── */

  --opacity-0:      0;
  --opacity-5:      0.05;
  --opacity-10:     0.1;
  --opacity-15:     0.15;
  --opacity-20:     0.2;
  --opacity-25:     0.25;
  --opacity-30:     0.3;
  --opacity-35:     0.35;
  --opacity-40:     0.4;
  --opacity-45:     0.45;
  --opacity-50:     0.5;
  --opacity-55:     0.55;
  --opacity-60:     0.6;
  --opacity-65:     0.65;
  --opacity-70:     0.7;
  --opacity-75:     0.75;
  --opacity-80:     0.8;
  --opacity-85:     0.85;
  --opacity-90:     0.9;
  --opacity-95:     0.95;
  --opacity-100:    1;

  /* ── Blur — Tailwind blur-{size} (v4) ──────── */

  --blur-none:      0;
  --blur-xs:        4px;
  --blur-sm:        8px;
  --blur-md:        12px;
  --blur-lg:        16px;
  --blur-xl:        24px;
  --blur-2xl:       40px;
  --blur-3xl:       64px;

  /* ── Motion — Tailwind duration / easing ───── */

  /* Transition duration — Tailwind duration-{ms} */
  --duration-0:     0ms;
  --duration-75:    75ms;
  --duration-100:   100ms;
  --duration-150:   150ms;
  --duration-200:   200ms;
  --duration-300:   300ms;
  --duration-500:   500ms;
  --duration-700:   700ms;
  --duration-1000:  1000ms;

  /* Transition timing — Tailwind ease-{type} (v4) */
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Custom easing — your original ease-out (more aggressive) */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ───────────────────────────────── */

  --section-gap:    clamp(3rem, 6vw, 6rem);
}