/* CaribCore Technologies N.V. — design tokens
   Load after caribcore-colours.css and caribcore-type.css.
   Every token is prefixed cc- so it never collides with a framework. */

:root {
  /* ---- spacing, 4 px rhythm ---- */
  --cc-space-0: 0.125rem; /* 2 px */
  --cc-space-1: 0.25rem;  /* 4 px */
  --cc-space-2: 0.5rem;   /* 8 px */
  --cc-space-3: 0.75rem;  /* 12 px */
  --cc-space-4: 1.0rem;   /* 16 px */
  --cc-space-5: 1.5rem;   /* 24 px */
  --cc-space-6: 2.0rem;   /* 32 px */
  --cc-space-7: 3.0rem;   /* 48 px */
  --cc-space-8: 4.0rem;   /* 64 px */
  --cc-space-9: 6.0rem;   /* 96 px */
  --cc-space-10: 8.0rem;   /* 128 px */

  /* ---- radius ---- */
  --cc-radius-none: 0;
  --cc-radius-sm:   2px;    /* badges, tags */
  --cc-radius-md:   4px;    /* buttons, inputs, table cells */
  --cc-radius-lg:   8px;    /* cards, panels, dialogs */
  --cc-radius-xl:   16px;   /* hero panels only */
  --cc-radius-full: 999px;  /* avatars and pills only */

  /* ---- elevation ---- */
  --cc-shadow-0: none;
  --cc-shadow-1: 0 1px 2px rgba(6,34,54,.06), 0 1px 3px rgba(6,34,54,.08);
  --cc-shadow-2: 0 2px 6px rgba(6,34,54,.07), 0 4px 12px rgba(6,34,54,.08);
  --cc-shadow-3: 0 8px 24px rgba(6,34,54,.10), 0 2px 6px rgba(6,34,54,.06);
  --cc-shadow-focus: 0 0 0 3px rgba(25,194,164,.45);

  /* ---- borders ---- */
  --cc-border:        1px solid #CDD3D7;
  --cc-border-strong: 1px solid #506472;
  --cc-border-focus:  2px solid #118470;

  /* ---- breakpoints (for reference; use in media queries) ---- */
  --cc-bp-sm: 480px;  --cc-bp-md: 768px;  --cc-bp-lg: 1024px;  --cc-bp-xl: 1280px;

  /* ---- layering ---- */
  --cc-z-base: 0;      --cc-z-sticky: 100;  --cc-z-drawer: 200;
  --cc-z-dialog: 300;  --cc-z-toast: 400;   --cc-z-tooltip: 500;

  /* ---- motion (see Visual Language Specification section 8) ---- */
  --cc-ease: cubic-bezier(.4,0,.2,1);
  --cc-dur-micro: 120ms; --cc-dur-sm: 180ms; --cc-dur-md: 240ms; --cc-dur-lg: 320ms;

  /* ---- layout ---- */
  --cc-container: 1200px;
  --cc-gutter: var(--cc-space-6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}