/* ============================================================
   EBANX Hackathon 2026 — Spacing, radii & layout tokens
   8px base grid. The KV is built on hard chevron geometry, so
   radii stay tight — sharp by default, gently softened at most.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px grid, with 2/4 micro steps) --- */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */
  --space-16:  8rem;      /* 128 */

  /* ---- Radii ------------------------------------------- */
  /* Brand reads sharp/technical — corners are subtle. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Chevron / clip geometry -------------------------- */
  /* The signature notch. Use as clip-path on frames & buttons. */
  --chevron-notch: 14px;       /* depth of the angled cut      */
  --clip-tag-right: polygon(0 0, calc(100% - var(--chevron-notch)) 0, 100% 50%, calc(100% - var(--chevron-notch)) 100%, 0 100%);
  --clip-tag-left:  polygon(var(--chevron-notch) 0, 100% 0, 100% 100%, var(--chevron-notch) 100%, 0 50%);
  --clip-bevel:     polygon(var(--chevron-notch) 0, 100% 0, 100% calc(100% - var(--chevron-notch)), calc(100% - var(--chevron-notch)) 100%, 0 100%, 0 var(--chevron-notch));

  /* ---- Borders ----------------------------------------- */
  --border-width-hair: 1px;
  --border-width-thin: 1.5px;
  --border-width:      2px;     /* the KV outlines are crisp 2px */
  --border-width-bold: 3px;

  /* ---- Layout ------------------------------------------ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --gutter:        var(--space-5);
}