/* Laila font */
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap');

/* Hind font */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');

:root {
  /* PRIMITIVES */
  /* Brand */
  --color-inlet:          #1E2E2B;
  --color-inlet-deep:     #131F1D;
  --color-forest:         #415554;
  --color-mist:           #94B0B4;
  --color-driftwood:      #FAECE1;
  --color-driftwood-dark: #F0E8DC;
  --color-cedar:          #DD906A;
  --color-ember:          #9F4F38;
  --color-ember-light:    #E09B7A;
  --color-light-cedar:    #F5DECF;

  /* Neutral */
  --color-black:            #162927;
  --color-white:            #FFFEFC;
  --color-border-lightest:  #EDE4D8;
  --color-border-light:     #D8CFC4;
  --color-body-text-dark:   #B8C8C4;
  --color-disabled:         #717C7B;
  --color-dark-mist:        #415554;
  --color-neutral:          #CCCCCC;

  /* System */
  --color-success-green:       #46A792;
  --color-success-green-light: #CEECE5;
  --color-error-red:           #CB5D4B;
  --color-error-red-light:     #F7E7E3;

  --color-family: #23575E;
  --color-support: #59335F;
  --color-rebuild: #89332B;

  --font-laila: 'Laila';
  --font-hind: 'Hind';

  /* SEMANTICS */
  --bg-primary: var(--color-inlet);
  --bg-secondary: var(--color-mist);
  --bg-tertiary: var(--color-forest);
  --bg-alternate: var(--color-driftwood);
  --bg-success: var(--color-success-green-light);
  --bg-error: var(--color-error-red-light);

  --border-primary: var(--color-driftwood);
  --border-secondary: var(--color-mist);
  --border-tertiary: var(--color-cedar);
  --border-alternate: var(--color-inlet);
  --border-success: var(--color-success-green);
  --border-error: var(--color-error-red);

  --text-primary: var(--color-driftwood);
  --text-secondary: var(--color-body-text-dark);
  --text-alternative: var(--color-black);
  --text-success: var(--color-success-green);
  --text-error: var(--color-error-red);

  --link-primary: var(--color-cedar);
  --link-secondary: var(--color-body-text-dark);

  --action-primary: var(--color-cedar);
  --action-primary-hover: var(--color-ember);
  --action-secondary: var(--color-mist);
  --action-secondary-hover: var(--color-forest);
  --action-foreground: var(--color-black);
  --action-foreground-hover: var(--color-driftwood);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes brushing {
  0%   {
    transform: rotate(0deg); 
    transform-origin: bottom left;
  }
  
  25%  { transform: rotate(-12deg); }

  75%  { transform: rotate(12deg); }

  100% {
    transform: rotate(1deg); 
    transform-origin: bottom left;
  }
}