/* =========================================================
   OC Design Tokens
   =========================================================
   Global, reusable CSS variables only.
   No component selectors should be added to this file.
   ========================================================= */

:root {
  /* Base colors */
  --oc-white: #fff;
  --oc-black: #000;

  /* Grays */
  --oc-gray-100: #f9f9f9;
  --oc-gray-150: #f7f7f7;
  --oc-gray-200: #f5f5f5;
  --oc-gray-250: #f3f3f3;
  --oc-gray-300: #eee;
  --oc-gray-350: #ddd;
  --oc-gray-400: #ccc;
  --oc-gray-600: #777;
  --oc-gray-650: #666;
  --oc-gray-800: #333;
  --oc-gray-900: #3A3A3C;

  /* Semantic support colors */
  --oc-green: #6b936a;
  --oc-green-dark: #3c763d;

  /* Radius */
  --oc-radius-sm: 3px;
  --oc-radius-md: 4px;
  --oc-radius-lg: 8px;

  /* Shadows */
  --oc-shadow-img: 1px 1px 5px rgba(0,0,0,.35);
  --oc-shadow-soft: 0 1px 8px rgba(0,0,0,.5);
  --oc-shadow-inset: 0 0 40px rgba(0,0,0,.2) inset;

  /* Motion */
  --oc-fade-duration: 5s;
  --oc-ease-gallery: cubic-bezier(0.645, 0.045, 0.355, 1);
	
	
	/*old highlight uses accent*/
  --oc-primary-highlight: var(--oc-accent);
	
	
}